利用uploadify進行ajax方式進行文件上傳

 uploadify插件是一個前臺功能提供的一個比較強大的插件，它基於jquery，能經過ajax進行上傳，在上傳的過程當中能夠顯示進度條，能夠前臺對文件大小，文件的格式等等進行校驗，也可以展示一些比較絢麗的畫面。具體詳細能夠查看官方的demo

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

二、下載此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>

三、定義file控件

 

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

四、設置上傳事件

 

 $(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