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

• 引入jquery的相关js

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

• 文件上传代码

//onchange事件
            fileUpload : function(){
                debugger;
                if(!$('#upload-btn').val())
                    return;
                Ext.getCmp('idFakeFileInput').setValue($('#upload-btn').val());
                var account = Ext.getCmp('idExpertCode').getValue();
                $('#idTagDivPhoto img').remove();                    //移除jcrop的渲染
                $('#idTagDivPhoto div').remove();
                $('#aa img').remove();
                $('#idTagDivPhoto').prepend('<img id = "target" src="none.png" width="240px" height="300px" class="jcrop-preview">');
                $('#aa').prepend('<img id = "preview" src="none.png" width="112px" height="132px" class="jcrop-preview" alt="预览" >');
                var type = $('#upload-btn').val().split('.')[$('#upload-btn').val().split('.').length-1];
                if(type.toLowerCase()!='jpg' && type.toLowerCase()!='png'){
                    Ext.MessageBox.alert("提示","请选择 jpg 或者 png 格式的图片");
                    $('#upload-btn').val('');
                    Ext.getCmp('idFakeFileInput').setValue('');
                    return;
                }
                if($('#upload-btn').val()){
                    var form = $('#upload-file');
                    var options  = {    
                            url:getPath()+'/ExpertLibController.json?photoUpload=true',    
                            type:'post',    
                            data : {
                                userAccount:account,
                                state:'original',
                                oldName:$('#idPhotoEditWin').data('photoName')
                            },
                            success:function(data){
                                debugger;
                                 var obj = Ext.util.JSON.decode(data);
                                 if(obj['success']=='false'){
                                     Ext.MessageBox.alert("提示",obj['msg']);
                                     $('#upload-btn').val('');
                                     Ext.getCmp('idFakeFileInput').setValue('');
                                     return;
                                 }
                                 //D:JavaEEworkspaceseclipseTest.metadata.pluginsorg.eclipse.wst.server.core	mp4wtpwebappszjInfoOSzjfxjkexpertsLibphotos
                                 $('#target').attr('src','photos/'+obj['msg']+'');
                                 $('#preview').attr('src','photos/'+obj['msg']+'');
                                 $('#idPhotoEditWin').data('photoName',obj['msg']);            //注意，在头像编辑窗口中保存该属性
                                 methods.jcropTackle();
                            }
                        };
                    form.ajaxSubmit(options);
                }
            },

• 后台处理略

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

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

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

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