高复用、高兼容的 ajaxForm 上传文件

引入jquery的相关js

1 <!-- 文件上传下载组件 -->
2 <script type="text/javascript" src="<%=path %>/zjfxjk/expertsLib/ref/jquery.ui.widget.js"></script>
3 <script type="text/javascript" src="<%=path %>/zjfxjk/expertsLib/ref/jquery.iframe-transport.js"></script>
4 <script type="text/javascript" src="<%=path %>/zjfxjk/expertsLib/ref/jquery.fileupload.js"></script>
5 <script type="text/javascript" src="<%=path %>/zjfxjk/expertsLib/ref/jquery.fileupload-process.js"></script>
6 <script type="text/javascript" src="<%=path %>/zjfxjk/expertsLib/ref/jquery.fileupload-validate.js"></script>
7 <script type="text/javascript" src="<%=path %>/zjfxjk/expertsLib/ref/jquery.form.js"></script>
8 <script type="text/javascript" src="<%=path %>/zjfxjk/expertsLib/ref/signTrans.js"></script>

文件上传代码

 1 //onchange事件
 2             fileUpload : function(){
 3                 debugger;
 4                 if(!$('#upload-btn').val())
 5                     return;
 6                 Ext.getCmp('idFakeFileInput').setValue($('#upload-btn').val());
 7                 var account = Ext.getCmp('idExpertCode').getValue();
 8                 $('#idTagDivPhoto img').remove();                    //移除jcrop的渲染
 9                 $('#idTagDivPhoto div').remove();
10                 $('#aa img').remove();
11                 $('#idTagDivPhoto').prepend('<img id = "target" src="none.png" width="240px" height="300px" class="jcrop-preview">');
12                 $('#aa').prepend('<img id = "preview" src="none.png" width="112px" height="132px" class="jcrop-preview" alt="预览" >');
13                 var type = $('#upload-btn').val().split('.')[$('#upload-btn').val().split('.').length-1];
14                 if(type.toLowerCase()!='jpg' && type.toLowerCase()!='png'){
15                     Ext.MessageBox.alert("提示","请选择 jpg 或者 png 格式的图片");
16                     $('#upload-btn').val('');
17                     Ext.getCmp('idFakeFileInput').setValue('');
18                     return;
19                 }
20                 if($('#upload-btn').val()){
21                     var form = $('#upload-file');
22                     var options  = {    
23                             url:getPath()+'/ExpertLibController.json?photoUpload=true',    
24                             type:'post',    
25                             data : {
26                                 userAccount:account,
27                                 state:'original',
28                                 oldName:$('#idPhotoEditWin').data('photoName')
29                             },
30                             success:function(data){
31                                 debugger;
32                                  var obj = Ext.util.JSON.decode(data);
33                                  if(obj['success']=='false'){
34                                      Ext.MessageBox.alert("提示",obj['msg']);
35                                      $('#upload-btn').val('');
36                                      Ext.getCmp('idFakeFileInput').setValue('');
37                                      return;
38                                  }
39                                  //D:JavaEEworkspaceseclipseTest.metadata.pluginsorg.eclipse.wst.server.core	mp4wtpwebappszjInfoOSzjfxjkexpertsLibphotos
40                                  $('#target').attr('src','photos/'+obj['msg']+'');
41                                  $('#preview').attr('src','photos/'+obj['msg']+'');
42                                  $('#idPhotoEditWin').data('photoName',obj['msg']);            //注意，在头像编辑窗口中保存该属性
43                                  methods.jcropTackle();
44                             }
45                         };
46                     form.ajaxSubmit(options);
47                 }
48             },

后台处理略

前台样式处理(注意：这里需要将被点击的按钮放在最上面，并将其设置为透明，而实际对用户看到的还是假的按钮。否则的话，在ie8下处于安全性的考虑试不允许选择文件的)

1 <div id="" style="border:0px solid grey;70px;height:20px;padding-top:3px;margin-right:0px;position:relative;
2                     background-color: #4178be;color:white;cursor: pointer;" align="center" onclick="">        <!-- methods.fakeBatchImportBtn() -->
3                       <span>选择文件</span>
4                     <form id="idTagFormBatchImport" style="100%;position:absolute;top:0px;left:0px;" method="post" enctype="multipart/form-data" >  
5                         <input id="idTagInputBatchImport"  style="70px;height:23px;opacity:0;filter:alpha(opacity=0);cursor:pointer;" type="file" name="file"  value="sss" onchange="methods.batchImportChange()" />  
6                     </form>  
7                 </div>

模拟点击，但需要注意输入框中值的清空（不需要）

1 fakePhotoUpload : function(){
2                 $('#upload-btn').trigger('click');
3             },