jquery.uploadify.3.2.1 試用在IE9,IE10中 上傳檔案的按鈕會無法點選
阿新 • • 發佈:2019-01-22
以前用的是版本2.1.4,這次看見更新後就嘗試了一下,發現有很多改變。
首先引入 js 和 css
- <linkrel="stylesheet"href="uploadify.css"/>
- <scriptsrc="jquery.uploadify.js"></script>
- 當然jquery 是必不可少的
接下來是程式碼:
//檔案上傳 $(function() { $("#uploadify").uploadify({ 'auto' : false, 'method' : "post", 'height' : '20', 'width' : '100', 'swf' : 'uploadify.swf', 'uploader' : '<%=basePath%>/contract/fileUpload.action', 'fileTypeDesc' : '格式:txt,xls,xlsx,doc,docx', //描述 'fileTypeExts' : '*.txt;*.xls;*.xlsx;*.doc;*.docx;*.zip', //檔案型別 'fileSizeLimit' : '10000KB', //檔案大小 'buttonText' : '選擇檔案', //按鈕名稱 'fileObjName' :'uploadify', 'successTimeout' : '5', 'requeueErrors' : false, 'removeTimeout' : '1', 'removeCompleted' : true, 'onUploadSuccess' : function(file, data, response){ var attach = eval('(' + data + ')'); $("#fileTable").show(); var addHtml = "<tr>"+ "<td class='t_l'>"+ "<a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"'>"+attach.filename+"."+attach.fileextname+"</a>"+ "</td>"+ "<td class='t_r'>"+attach.filesize+"</td>"+ "<td class='t_c'>"+attach.uploaddate+"</td>"+ "<td class='t_c'><a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"' id='"+attach.id+"'>下載</a></td>"+ "<td class='t_c'><a href='#' onclick='removeFile(this)' id='"+attach.id+"' name='attach_id'>取消</a></td>"+ "</tr>"; $("#fileBody").append(addHtml); } }); });
其中 onUploadSuccess為成功上傳後的回撥函式 file 為上傳的檔案,可通過file.name 獲取檔名 size 可獲取大小
data 為後臺reponse輸出的字串,上例中輸出的是 json 物件,故使用eval 進行轉換
response 為 結果 true or false,具體可參考官方文件。
<td colspan="3"> <input type="file" name="uploadify" id="uploadify" /> <input type="button" value="上傳" onclick="$('#uploadify').uploadify('upload','*');"> <input type="button" value="取消" onclick="$('#uploadify').uploadify('stop');"> <table style="display: none;" id="fileTable"> <tbody style="width: 550px;border: solid;border-color: #D0D0D3;" id="fileBody"> <tr style="border: solid;border: #D0D0D3;"> <td width="200px;" class="t_c">檔名</td> <td width="100px;" class="t_c">大小(k)</td> <td width="150px;" class="t_c">上傳時間</td> <td width="100px;" class="t_c" colspan="2">操作</td> </tr> </tbody> </table> </td>
可以看到初始化中的很多屬性都變化了,還包括上傳操作的函式名稱等等。
其次,還有一個問題,該控制元件在IE9中 上傳檔案的按鈕會無法點選,初步檢視可能是由於flash 的問題 引起,百度後發現 修改原始碼js 中的 classid即可。
具體可參考:
http://www.cnblogs.com/donhwa/archive/2011/06/23/ie9_swfupload_bug.html
解決此問題後的js替換檔案下載
http://files.cnblogs.com/lostboy/jquery.uploadify3.1.fixed.js
或
http://download.csdn.net/detail/chenxiang199055/6003627