jquery jQuery-File-Upload 例子

网上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 贴代码：
[code]
<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>
[/code]

3效果：见附件图片。


4 注意：操作的时候一定查看：API,Demo
https://github.com/blueimp/jQuery-File-Upload/wiki/API
http://blueimp.github.io/jQuery-File-Upload/basic.html

此外 fireFox 的 debug插件配合使用，有脚本输出的断点功能，以及console.info的显示。

在使用中如有问题，请给我留言，共同探讨..进步。