利用uploadify进行ajax方式进行文件上传

2019独角兽企业重金招聘Python工程师标准>>>

 uploadify插件是一个前台功能提供的一个比较强大的插件，它基于jquery，能通过ajax进行上传，在上传的过程中可以显示进度条，可以前台对文件大小，文件的格式等等进行校验，也能够展现一些比较绚丽的画面。具体详细可以查看官方的demo

1、官方地址：http://www.uploadify.com/

2、下载此js插件，然后把uploadify插件引入到项目中

 <script src="<c:url value="/js/uploadify/swfobject.js"/>" type="text/javascript" charset="utf-8"></script>     <script src="<c:url value="/js/uploadify/jquery.uploadify.v2.1.0.js"/>" type="text/javascript"              charset="utf-8"> </script>

3、定义file控件

 

 <input type="file" id="frontfile" name="frontfile" />

4、设置上传事件

 

 $(function (){         $("#backfile").uploadify({             'uploader': '/js/uploadify/uploadify.swf?v='+new Date(),             'script': 'file_idRegisterUpbackfile.action;jsessionid=<%=session.getId()%>',             'fileDataName': 'backfile', //此处是定义上传控件的id            'cancelImg': 'js/jquery.uploadify-v2.1.0/cancel.png',             'folder': 'UploadFile',             'auto': true,             'buttonImg' : '/images/diyclaim/liulan_e.jpg',             'height' : 25,             'width' : 66,             'fileDesc':'支持图片格式：jpg，jpeg', //点击上传，文件选择框中显示的文字            'fileExt':'*.jpg;*.jpeg',             'sizeLimit':2*1024*1024,             'onError' : function(event, queueID, fileObj,errorObj){                 if(errorObj.type=='File Size')                         errorObj.type='文件大小';                    alert("图片：" + fileObj.name + " 上传失败。错误信息："+errorObj.type+" 异常");                },            'onComplete': function (event, queueID, fileObj, response, data){                         //这里面是回掉函数                         var jsonData;                         try{                             jsonData=eval('(' + response + ')');                          }catch(e){                         }                         showImage(jsonData.oldfileNameAndPath);//得到后台返回来的字符串                                                          }         });     });

以上是对此控件的粗略使用，

另外使用jquery.lightbox可以实现其他的比较绚的功能，例如可以展示一个图片的缩略图，然后鼠标点击以后可以在弹出层中看大图，然后通过拖动里面的条，可以把图片放大或者缩小等等，还请亲们自行研究。详细可见官方文档。

本文出自 “走在未来的路上” 博客，请务必保留此出处http://wtf0313.blog.51cto.com/1093061/1187013

转载于:https://my.oschina.net/u/2457218/blog/534760