File Input
Custom File Input 自定义文件框
更高级控件的可以使用: dropzone.js
<input type="file" name="myfile" id="my-file-input" />
$('#my-file-input').ace_file_input();
Options 参数
Style 默认 false ，
no_file ：没有文件选择时，显示的文字
no_icon ：无文件选择时，显示的图标 、
btn_choose:没有选择文件的按钮样式
btn_change ：选择后，更改按钮
icon_remove : 移除选择的文件
droppable ：默认false， ture则为启用拖放
thumbnail：缩略图大小small, large or fit.
allowExt：选择文件类型允许的列表(白名单)
denyExt：选择文件类型不允许的列表(黑名单)
allowMime 白名单
denyMime 黑名单
maxSize 文件大小
Callbacks 回调函数
before_change
$('#my-file-input').ace_file_input({
...
,
before_change: function(files, dropped) {
//files is a "File" object array in modern browsers
//files is a "string" (file name) array in older browsers
//dropped=true if files are drag & dropped
var valid_files = []
for(var i = 0; i < files.length; i++) {
var file = files[i];
if( typeof file === 'string') {
/older browsers that don't support FileReader API, such as IE
//here, file is just a filename string
//if (file is valid) valid_files.push(file);
} else if( 'File' in window && file instanceof window.File ) {
//file is a "File" object with following properties
//file.name
//file.type (mime type)
//file.size
//if (file is valid) valid_files.push(file);
}
}
return valid_files;
//or
return true;//original input files
//or
return false;//all are invalid, but don't reset input
//or
return -1;//all are invalid, reset input
}
before_remove
$('#my-file-input').ace_file_input({
...
,
before_remove : function() {
if( uploadInProgress) return false;//don't allow resetting
return true;
}
});
preview_error
$('#my-file-input').ace_file_input({
...,
preview_error : function(filename, error_code) {
//filename = name of the file that had a problem
switch(error_code) {
case 1:
//FILE_LOAD_FAILED
break;
case 2:
//IMAGE_LOAD_FAILED
break;
case 3:
//THUMBNAIL_FAILED
break;
}
}
});
File Filtering 文件过滤
allowExt
denyExt
allowMime
denyMime
maxSize
before_change
Functions
show_file_list
$('#my-input').ace_file_input('show_file_list', ['file1.txt']);
$('#my-input').ace_file_input('show_file_list', [
{type: 'image', name: 'name of image', path: 'http://path/to/image/for/preview'},
{type: 'file', name: 'hello.txt'}
]);
//type can be 'image', 'video', 'audio', 'file'
update_settings
$('#my-input').ace_file_input('update_settings', {
allowExt: ['pdf', 'doc', 'docx']
});
files
var files = $('#my-input').ace_file_input('files');
//is similar to:
var files = $('#my-input').data('ace_input_files');
method
var method = $('#my-input').ace_file_input('method');
//is similar to:
var method = $('#my-input').data('ace_input_method');
disable
$('#my-input').ace_file_input('disable');
enable
$('#my-input').ace_file_input('enable');
enable_reset
$('#my-input').ace_file_input('enable_reset', false);
$('#my-input').ace_file_input('enable_reset', true);
reset_input
$('#my-input').ace_file_input('reset_input');
reset_input_ui
$('#my-input').ace_file_input('reset_input_ui');
$('#my-form').on('reset', function(e) {
$('#my-input').ace_file_input('reset_input_ui');
});
reset_input_field
loading
$('#my-input').ace_file_input('loading' , true);//adds overlay
$('#my-input').ace_file_input('loading' , false);//removes overlay
$('#my-input').ace_file_input('loading' , ' custom content inside overlay such as a progressbar ');
Events
$('#my-file-input').ace_file_input({
droppable: true
}) .on('change', function() {
var files = $(this).data('ace_input_files');
var method = $(this).data('ace_input_method');
});
Uploading
启用 拖动 文件时候，应对上传文件校验
var files = $('#my-file-input').data('ace_input_files');
var myform = $('#myform');
var fd = new FormData(myform.get(0));//populate FormData with myform data
var myform = $('#myform');
var fd = new FormData();//empty FormData object
$.each(myform.serializeArray(), function(i, item) {
//add form fields one by one to our FormData
fd.append(item.name, item.value);
});
myform.find('input[type=file]').each(function(){
var field_name = $(this).attr('name');
//for fields with "multiple" file support
//field name should be something like myfile[]
var files = $(this).data('ace_input_files');
if(files && files.length > 0) {
for(var f = 0; f < files.length; f++) {
fd.append(field_name, files[f]);
}
}
});
var deferred = $.ajax({
url: myform.attr('action'),
type: myform.attr('method'),
processData: false,//important
contentType: false,//important
dataType: 'json',//depending on your server side response
data: fd//our FormData object
})
Ajax 提交 from数据
deferred.done(function(result) {
//on success (successful response from server)
}).fail(function(result) {
//unable to receive a valid response from server
});
低版本浏览器
var deferred = new $.Deferred //create a custom deferred object, because there's no ajax here to create it for us
var temporary_iframe_id = 'temporary-iframe-'+(new Date()).getTime()+'-'+(parseInt(Math.random()*1000));
var temp_iframe =
$('<iframe id="'+temporary_iframe_id+'" name="'+temporary_iframe_id+'" \
frameborder="0" width="0" height="0" src="about:blank"\
style="position:absolute; z-index:-1; visibility: hidden;" />')
.insertAfter(myform)
myform.append('<input type="hidden" name="temporary-iframe-id" value="'+temporary_iframe_id+'" />');
temp_iframe.data('deferrer' , deferred);
//we save the deferred object to the iframe and in our server side response
//we use "temporary-iframe-id" to access iframe and its deferred object
myform.attr({
'method': 'POST',
'enctype': 'multipart/form-data',
'target': temporary_iframe_id //important
});
myform.get(0).submit();
//if we don't receive a response after 30 seconds, let's declare it as failed!
ie_timeout = setTimeout(function(){
ie_timeout = null;
temp_iframe.attr('src', 'about:blank').remove();
deferred.reject({'status':'fail', 'message':'Timeout!'});
} , 30000);
}
Notes
<input multiple type="file" name="myfiles[]" id="myfiles" />