form+iframe解决跨域上传文件的方法
(1) jsp代码:
<formid="form"name="form"enctype="multipart/form-data"method="post"target="hidden_frame"> <tablestyle="border:0;width:100%;text-align:middle;"> <trstyle="border:0;height:20px;width:100%;"> <tdstyle="border:0;width:75px;height:20px;line-height:20px;">控件标识</td> <td> <inputid="viewkey"name="viewkey"style="width:200px;"type="text"maxlength="300"placeholder="控件标识不能超过30个字。"class="easyui-validatebox"onkeyup="check()"required="true"missingMessage="参数名称不可为空."/> </td> </tr> <tr> <td>更新类型</td> <td><inputid="type"name="type"class="easyui-combobox"valueField="id"textField="text"panelHeight="auto"/></td> </tr> <tr> <td>备注</td> <tdcolspan=3> <textareaid="remark"name="remark"onkeyup="check()"placeholder="备注不能超过300个字。"style="width:200px;height:80px;"></textarea> </td> </tr> <tr> <td>资源文件:</td> <td> <inputtype="file"id="file"name="file"style="height:25px;width:200px;"onchange="fileChange(this);"> <inputtype="hidden"name="projectid"id="projectid"> <inputtype="hidden"name="downimageconfigid"id="downimageconfigid"> <inputtype="hidden"name="iskeychange"id="iskeychange"> <inputtype="hidden"name="isnopic"id="isnopic"> <iframename="hidden_frame"id="hidden_frame"style="display:none"></iframe> </td> </tr> <tr> <td></td> <td><divstyle="color:red;margin-top:10px;">图片大小必须小于500K。</div></td> </tr> </table> </form>
说明:form中的target指向iframe中的name。这点要注意。
(2) js代码:
//添加对话框 functioninitDialog(){ $('#imgconf-dialog').dialog({ modal:true, closable:false, top:20, buttons:[{ id:'ut_add', text:'确定', iconCls:'icon-ok', handler:function(){ //表单注册事件 $('#form').form({ success:function(data){//提交成功后的回调函数 if(data==='00'){ jqueryAlert('操作成功'); } if(data==='03'){ $.messager.alert(global.title,'主键为空!','warning'); $('#ut_add').linkbutton('enable'); return; } if(data==='02'){ $.messager.alert(global.title,'已存在的控件标识!','warning'); $('#ut_add').linkbutton('enable'); return; } if(data==='01'){ $.messager.alert(global.title,'操作失败','warning'); $('#ut_add').linkbutton('enable'); return; } $('#imgconf-dialog').dialog('close'); //重新加载列表 getDataGridData();; } }); $('#ut_add').linkbutton('disable'); //【添加】 if(global.operatype=='add'){ if($('#viewkey').val()==null||$('#viewkey').val()==''){ $.messager.alert(global.title,'您尚未输入控件标识!','warning'); $('#ut_add').linkbutton('enable'); return; } if($('#file').val()==''){ $.messager.alert(global.title,'您尚未上传图片!!','warning'); $('#ut_add').linkbutton('enable'); return; } //表单上传操作 $('#projectid').val(global.projectid); $('#form').attr("action",global.web_path+"/grid/imgconf/addimgconf.do"); $("#form").submit(); $('#ut_add').linkbutton('disable'); }else{//【编辑】 //控件标识是否改变 variskeychange; if(selected.viewkey==$('#viewkey').val()){//控件标识没有改变 iskeychange='no'; }else{ iskeychange='yes'; } varisnopic; if($('#file').val()==''){//是否有上传图片 snopic='yes'; }else{ isnopic='no'; } //表单上传操作 $('#projectid').val(global.projectid); $('#downimageconfigid').val(selected.downimageconfigid); $('#iskeychange').val(iskeychange); $('#isnopic').val(isnopic); $('#form').attr("action",global.web_path+"/grid/imgconf/modimgconf.do"); $("#form").submit();; $('#ut_add').linkbutton('disable'); } } },{ id:'ut_close', text:'退出', handler:function(){ $('#ut_add').linkbutton('enable'); $('#imgconf-dialog').dialog('close'); $('#uploadify').uploadifyClearQueue(); } }] }); } //重置 functionreset(){ $('#ut_add').linkbutton('enable'); vartarget=$('#file'); if(global.operatype=='mod'){ $('#imgconf-dialog').dialog('setTitle','修改'); $('#viewkey').val(selected.viewkey); $('#type').combobox('setValue',selected.type); $('#remark').val(selected.remark); $('#imgconf-dialog').dialog('open'); //文件上传清空 deleteFile('file'); }else{ $('#imgconf-dialog').dialog('setTitle','添加'); $('#viewkey').val(''); $('#remark').val(''); //文件上传清空 deleteFile('file'); } } /** *文本区域限制长度 */ functioncheck(){ varcontent=$('#remark').val(); len=content.length; varmaxlen=300; if(len>maxlen){ alert("字数太长,已被截断为300字!"); $('#remark').val(content.substr(0,maxlen)); } } //inputtype='file'置位操作 functiondeleteFile(file){ varie=(navigator.appVersion.indexOf("MSIE")!=-1);//IE varff=(navigator.userAgent.indexOf("Firefox")!=-1);//Firefox if(ie){ refreshUploader($("input[name="+file+"]")[0]); } else{ $("input[name="+file+"]").attr("value",""); } } functionrefreshUploader(file){ varfile2=file.cloneNode(false); file2.onchange=file.onchange; file.parentNode.replaceChild(file2,file); } //检测文件大小和类型 functionfileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))){ alert("只允许上传jpg|gif|png|jpeg格式的图片"); if(window.ActiveXObject){//forIE target.select();//selectthefile,andclearselection document.selection.clear(); }elseif(window.opera){//foropera target.type="text";target.type="file"; }elsetarget.value="";//forFF,Chrome,Safari return; }else{ return;//alert("ok");//oryoucandonothinghere. } //检测上传文件的大小 varisIE=/msie/i.test(navigator.userAgent)&&!window.opera; varfileSize=0; if(isIE&&!target.files){ varfilePath=target.value; varfileSystem=newActiveXObject("Scripting.FileSystemObject"); varfile=fileSystem.GetFile(filePath); fileSize=file.Size; }else{ fileSize=target.files[0].size; } varsize=fileSize/1024; if(size>(500)){ alert("文件大小不能超过500KB"); if(window.ActiveXObject){//forIE target.select();//selectthefile,andclearselection document.selection.clear(); }elseif(window.opera){//foropera target.type="text";target.type="file"; }else{ target.value="";//forFF,Chrome,Safari } return; }else{ return; } }
(3)后台java代码:
/** *添加下载图片配置 *@throwsIOException */ @RequestMapping(value="/grid/imgconf/addimgconf",method={RequestMethod.POST,RequestMethod.GET},produces={"text/html;charset=UTF-8"}) @ResponseBody publicStringaddImgConf(HttpServletRequest request,HttpServletResponseresponse,BindExceptionerrors)throwsIOException{ Stringm="00"; MultipartHttpServletRequestmultipartRequest=(MultipartHttpServletRequest)request; Map<String,MultipartFile>fileMap=multipartRequest.getFileMap(); response.setHeader("Access-Control-Allow-Origin","*"); Stringprojectid=Function.dealNull(multipartRequest.getParameter("projectid")); StringviewKey=Function.dealNull(multipartRequest.getParameter("viewkey")); Stringtype=Function.dealNull(multipartRequest.getParameter("type")); Stringremark=Function.dealNull(multipartRequest.getParameter("remark")); try{ //唯一性判断 intsize=imgConfService.getImgConfsCount(Constants.DEF_STRING_NULL,projectid,viewKey,Constants.STATUS_ON); if(size>0){ m="02"; logger.info("已存在的控件标识!"); return"<textarea>"+m+"</textarea>"; } //上传图片 Map<String,String>picInfo=imgConfService.uploadImage(fileMap); imgConfService.addImgConf(UUID.randomUUID().toString(),projectid,viewKey,type,remark,picInfo.get("URL"),Constants.STATUS_ON); m="00"; logger.info("添加下载图片配置成功!"); }catch(Exceptione){ m="01"; logger.error("添加下载图片配置失败",e); }
//加<textarea>以解决IE下submit后没有执行回调success函数,这个是jqueryeasyuiform的bug
return"<textarea>"+m+"</textarea>";
}
说明:"<textarea>"+m+"</textarea>";和produces={"text/html;charset=UTF-8"}解决IE下不能执行回调函数success的问题
以上这篇form+iframe解决跨域上传文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。