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' : '/p_w_picpaths/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可以實現其他的比較絢的功能,例如可以展示一個圖片的縮略圖,然後鼠標點擊以後可以在彈出層中看大圖,然後通過拖動裏面的條,可以把圖片放大或者縮小等等,還請親們自行研究。詳細可見官方文檔。