网上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
此外 fireFox 的 debug插件配合使用,有脚本输出的断点功能,以及console.info的显示。