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

Posted 2020-10-19 zhangjieatbky

• 引入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:\JavaEE\workspaces\eclipseTest\.metadata\.plugins\org.eclipse.wst.server.core\tmp4\wtpwebapps\zjInfoOS\zjfxjk\expertsLib\photos
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             },

• 后台处理略

• 前台样式处理

 1 <td style="width:260px;width:36px;border: 0px solid red;" colspan="3">
 2                         <table style="width:100%">
 3                             <tr>
 4                                 <td id="idTagFakeFileInput" style="width:80%"></td>
 5                                 <td id="idTagFakeFileBtn" style="width:20%" align="center">
 6                                     <div id="" style="border:0px solid grey;width:70px;height:20px;padding-top:3px;margin-right:0px;
 7                                          background-color: #4178be;color:white;cursor: pointer;" align="center" onclick="methods.fakePhotoUpload()">
 8                                            <span>选择文件</span>
 9                                      </div>    
10                                 </td>
11                             </tr>
12                         </table>
13                         <form id="upload-file" style="width:100%" method="post" enctype="multipart/form-data" >  
14                             <input id="upload-btn"  style="width:100%;display:none;" type="file" name="file"  value="sss" onchange="methods.fileUpload()" />  
15                         </form>  
16                     </td>

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

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