jquery-file-upload
曹季同
下面介绍 用插件实现图片异步上传的代码。
1 比要的js一个都不能少，他们之间是有依赖关系的。
jquery-1.8.2.min.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.fileupload.js
jquery.iframe-transport.js
jquery.fileupload-process.js
jquery.fileupload-validate.js
（最后2个js是有依赖的，缺少的话acceptFileTypes，maxFileSize 不会进行验证）
2 贴代码：
<script>
$(function () {
uploadImageAjaxDelete = function (url,obj){
$.ajax({url:url,async:false,dataType:"text",success:function(data){
if(data=='1'){
//如果删除成功，恢复file的使用，同时是图片渐变消失
$(obj).parent().children("input[type='file']").removeAttr("disabled");
$(obj).parent().children("img").fadeOut("slow",function(){
$(this).add($(obj).parent().children("a")).add($(obj).parent().children("input:hidden")).add($(obj).parent().children("br")).remove();
});
}else{
alert('图片删除失败！');
}
}});
}
$("input[type='file']").fileupload({
url: 'image_ajax_save.action',
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 2097152// 2 MB
}).on('fileuploadadd', function (e, data) {
$(this).parent().children("label").remove();
$("<p class='uploadImgLoad'>上传中... 0%</p>").appendTo($(this).parent());
$(this).attr("disabled",true);
}).on('fileuploadprocessalways', function (e, data) {
if(data.files.error){
$(this).parent().children("p").remove();
$(this).removeAttr("disabled");
if(data.files[0].error=='acceptFileTypes'){
$(this).parent().append("<label class='error'>图片类型错误</label>");
}
if(data.files[0].error=='maxFileSize'){
$(this).parent().append("<label class='error'>图片不能大于2M</label>");
}
}
}).on('fileuploadprogressall', function (e, data) {
var $p = $(this).parent().children("p");
var progress = parseInt(data.loaded / data.total * 100, 10);
if($p.length==0){
$("<p class='uploadImgLoad'>上传中... "+progress+"%</p>").appendTo($(this).parent());
}else{
console.info(progress);
$p.text('上传中... '+progress+'%');
if(progress==100){
$p.fadeOut("slow",function(){
$(this).remove();
});
}
}
}).on('fileuploaddone', function (e, data) {
if(data.result.result=='error'){
$(this).removeAttr("disabled");
alert('抱歉，上传过快，请稍等！');
}else if(data.result.result=='success'){
$(this).parent().prepend($("<a href='#' > 删除</a>").attr("onclick","uploadImageAjaxDelete('image_ajax_delete.action?dbFileName="+data.result.dbFileName+"',this)").add("<br/>"))
.prepend($("<img width='140' height='90' border='0' />").attr("src",data.result.url))
.prepend($("<input type='hidden' name="+data.result.hiddenName+" id="+data.result.hiddenName+" value='"+data.result.dbFileName+"' />"));
}
});
});
</script>
3效果：见附件图片。
4 注意：操作的时候一定查看：API,Demo
https://github.com/blueimp/jQuery-File-Upload/wiki/API
http://blueimp.github.io/jQuery-File-Upload/basic.html
校验文件的格式：
<pre>acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 99 * 1024 * 1024,
minFileSize: 5,
maxNumberOfFiles: 50,
messages: {
maxFileSize: 'File exceeds maximum allowed size of 99MB',
acceptFileTypes: 'File type not allowed'
},processfail: function (e, data) {
var currentFile = data.files[data.index];
if (data.files.error && currentFile.error) {
// there was an error, do something about it
console.log(currentFile.error);
}
}</pre>
关于此插件的详细用法注释：
var uploader = $('#fileupload');
uploader.fileupload(
{
url: '/feature/attach/dt/create/fild/',
singleFileUploads: false, //一次上传多个文件
autoUpload: false,
//limitMultiFileUploads: 3, //每个请求最多上传3个文件
maxFileSize: 50 * 1024 * 1024,
maxNumberOfFiles: 3,
messages: {
maxFileSize: '超过允许的最大值！',
maxNumberOfFiles: '上传的文件数量超过允许的最大值！'
},
processfail: function (e, data) {
//单个文件上传失败
self.datafile = '';
// console.log(data)
// $('#fileupload').fileupload('destroy');
var currentFile = data.files[data.index];
if (data.files.error && currentFile.error) {
// there was an error, do something about it
// console.log(currentFile);
if (currentFile.error == '上传的文件数量超过允许的最大值！') {
$('#warning_file').css('display', 'block').html('').prepend(currentFile.error + '<br>')
} else {
$('#warning_file').css('display', 'block').prepend(currentFile.name + ' ' + currentFile.error + '<br>')
}
}
// return false
},
change: function () {
$('#warning_file').css('display', 'none').html('');
$('#fileupload_file_name').html('')
},
start: function (e) {
// 开始上传后不能再选文件了
$("#fileupload").attr("disabled", "disabled");
},
process: function (e, data) {
// console.log('回调为单个文件的处理队列的开始。')
// 回调为单个文件的处理队列的开始。
},
processdone: function (e, data) {
self.datafile = data
// console.log('单个文件处理圆满结束', data)
// 单个文件处理圆满结束
},
processstart: function (e, data) {
// console.log('上传队列处理开始')
// 队列处理开始
},
send: function (e, data) {
// console.log('send')
// 每个上传文件开始的时候
},
sent: function (e, data) {
console.log('sent')
},
started: function (e, data) {
// console.log('started')
// 开始的回调等效于开始回调，并且在开始回调运行之后触发，并且在开始回调中调用的过渡效果已经完成。
},
stopped: function (e, data) {
// console.log('stopped')
// 停止的回调等效于停止回调，并且在停止回调运行并且在停止回调和所有完成回调中调用的过渡效果已完成之后触发
},
always: function (e, data) {
// console.log('always', data)
// 回调结束（成功，中止或错误）上传请求。这个回调相当于所提供的完整的回调
},
// add:function (e,data) {
// console.log('add')
// data.submit()
// },
chunkalways: function (e, data) {
// console.log('回调结束', data)
// 回调结束，不论是上传成功还是失败还是终止
},
processalways: function (e, data) {
// console.log('结束一个文件上传队列', data)
// data.submit()
// 结束一个文件上传队列
},
processstop: function (e, data) {
// console.log('文件上传队列停止', data)
// 文件上传队列停止
},
completed: function () {
// console.log('completed')
},
progressall: function (e, data) {
//回调全局上传进度事件。
var progress = parseInt(data.loaded / data.total * 100, 10);
$('#progresss').css(
'width',
progress + '%'
);
$('#progresss').html(progress + '%')
},
})
.bind('fileuploadadd', function (e, data) {
for (var i = 0; i < data.files.length; i++) {
$('#fileupload_file_name').prepend(data.files[i].name + '<br>');
}
})
.bind('fileuploadprocessdone', function (e, data) {
// console.log('wode',data)
// console.log(data.files[0].error)
// console.log('fileuploadprocessdone')
}).bind('fileuploadprocessstart', function (e, data) {
// console.log('sent111')
// console.log(data.files[0].error)
});
类似资料：