jquery.uploadify.3.2.1 试用在IE9,IE10中 上传文件的按钮会无法点击

以前用的是版本2.1.4,这次看见更新后就尝试了一下，发现有很多改变。

首先引入 js 和 css

1. <link rel="stylesheet" href="uploadify.css" />  
2.  <script src="jquery.uploadify.js"></script>  
3. 当然jquery 是必不可少的  

接下来是代码：

[javascript] view plaincopy

1. //文件上传    
2. $(function() {    
3.     $("#uploadify").uploadify({    
4.        'auto' : false,    
5.        'method' : "post",    
6.        'height' : '20',    
7.        'width' : '100',    
8.        'swf' : 'uploadify.swf',     
9.        'uploader' : '<%=basePath%>/contract/fileUpload.action',    
10.        'fileTypeDesc' : '格式:txt,xls，xlsx,doc,docx',     //描述    
11.        'fileTypeExts' : '*.txt;*.xls;*.xlsx;*.doc;*.docx;*.zip',            //文件类型    
12.        'fileSizeLimit' : '10000KB',         //文件大小    
13.        'buttonText' : '选择文件',           //按钮名称    
14.        'fileObjName'    :'uploadify',    
15.        'successTimeout' : '5',    
16.        'requeueErrors' : false,    
17.        'removeTimeout' : '1',    
18.        'removeCompleted' : true,    
19.        'onUploadSuccess' : function(file, data, response){    
20.             var attach = eval('(' + data + ')');    
21.             $("#fileTable").show();    
22.             var addHtml = "<tr>"+    
23.                             "<td class='t_l'>"+    
24.                                 "<a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"'>"+attach.filename+"."+attach.fileextname+"</a>"+    
25.                             "</td>"+    
26.                             "<td class='t_r'>"+attach.filesize+"</td>"+    
27.                             "<td class='t_c'>"+attach.uploaddate+"</td>"+    
28.                             "<td class='t_c'><a href='<%=basePath%>/attach/downloadAttach.action?attachId="+attach.id+"' id='"+attach.id+"'>下载</a></td>"+    
29.                             "<td class='t_c'><a href='#' onclick='removeFile(this)' id='"+attach.id+"' name='attach_id'>取消</a></td>"+    
30.                           "</tr>";    
31.             $("#fileBody").append(addHtml);    
32.         }    
33.     });    
34. });    

其中 onUploadSuccess为成功上传后的回调函数 file 为上传的文件，可通过file.name 获取文件名 size 可获取大小

data 为后台reponse输出的字符串，上例中输出的是 json 对象，故使用eval 进行转换

response 为 结果 true or false，具体可参考官方文档。

[javascript] view plaincopy

1. <td colspan="3">    
2.     <input type="file" name="uploadify" id="uploadify" />    
3.     <input type="button" value="上传" onclick="$('#uploadify').uploadify('upload','*');">    
4.     <input type="button" value="取消" onclick="$('#uploadify').uploadify('stop');">    
5.     <table style="display: none;" id="fileTable">    
6.         <tbody style="width: 550px;border: solid;border-color: #D0D0D3;" id="fileBody">    
7.             <tr style="border: solid;border: #D0D0D3;">    
8.                 <td width="200px;" class="t_c">文件名</td>    
9.                 <td width="100px;" class="t_c">大小(k)</td>    
10.                 <td width="150px;" class="t_c">上传时间</td>    
11.                 <td width="100px;" class="t_c" colspan="2">操作</td>    
12.             </tr>    
13.         </tbody>    
14.     </table>    
15. </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