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

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\photos40 ?????????????????????????????????$(‘#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>