(1) jsp代码：

<form id="form" name="form" enctype="multipart/form-data" method="post" target="hidden_frame"> <table style="border:0;width:100%;text-align:middle;"> <tr style="border:0;height:20px;width:100%;"> <td style="border:0;width:75px;height:20px;line-height:20px;">控件标识</td> <td> <input id="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><input id="type" name="type" class="easyui-combobox" valueField="id" textField="text" panelHeight="auto"/></td> </tr> <tr> <td>备注</td> <td colspan=3> <textarea id="remark" name="remark" onkeyup="check()" placeholder="备注不能超过300个字。" style="width:200px;height:80px;" ></textarea> </td> </tr> <tr> <td>资源文件：</td> <td > <input type="file" id="file" name="file" style="height:25px; width:200px;" onchange="fileChange(this);"> <input type="hidden" name="projectid" id="projectid" > <input type="hidden" name="downimageconfigid" id="downimageconfigid" > <input type="hidden" name="iskeychange" id="iskeychange" > <input type="hidden" name="isnopic" id="isnopic" > <iframe name="hidden_frame" id="hidden_frame" style="display:none"></iframe> </td> </tr> <tr> <td></td> <td><div style="color: red; margin-top: 10px;">图片大小必须小于500K。</div></td> </tr> </table></form>

说明：form中的target指向iframe中的name。这点要注意。

(2) js代码：

//添加对话框function initDialog(){ $('#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 {//【编辑】 //控件标识是否改变 var iskeychange; if(selected.viewkey == $('#viewkey').val()){//控件标识没有改变 iskeychange = 'no'; }else{ iskeychange = 'yes'; } var isnopic; 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(); } }] });}//重置function reset(){ $('#ut_add').linkbutton('enable'); var target = $('#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'); }}/** * 文本区域限制长度 */function check(){ var content = $('#remark').val(); len = content.length; var maxlen = 300; if(len > maxlen){ alert("字数太长，已被截断为300字!"); $('#remark').val(content.substr(0,maxlen)); }}// input type='file'置位操作function deleteFile(file){ var ie = (navigator.appVersion.indexOf("MSIE")!=-1);//IE var ff = (navigator.userAgent.indexOf("Firefox")!=-1);//Firefox if(ie){ refreshUploader($("input[name="+file+"]")[0]); } else{ $("input[name="+file+"]").attr("value",""); }}function refreshUploader(file){ var file2= file.cloneNode(false); file2.onchange= file.onchange; file.parentNode.replaceChild(file2,file);}//检测文件大小和类型function fileChange(target){ //检测上传文件的类型 if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))) { alert("只允许上传jpg|gif|png|jpeg格式的图片"); if(window.ActiveXObject) {//for IE target.select();//select the file ,and clear selection document.selection.clear(); } else if(window.opera) {//for opera target.type="text";target.type="file"; } else target.value="";//for FF,Chrome,Safari return; } else { return; //alert("ok");//or you can do nothing here. } //检测上传文件的大小 var isIE = /msie/i.test(navigator.userAgent) && !window.opera; var fileSize = 0; if (isIE && !target.files){ var filePath = target.value; var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); var file = fileSystem.GetFile (filePath); fileSize = file.Size; } else { fileSize = target.files[0].size; } var size = fileSize / 1024; if(size>(500)){ alert("文件大小不能超过500KB"); if(window.ActiveXObject) {//for IE target.select();//select the file ,and clear selection document.selection.clear(); } else if(window.opera) {//for opera target.type="text";target.type="file"; } else { target.value="";//for FF,Chrome,Safari } return; }else{ return; } }

(3) 后台java代码：

/*** 添加下载图片配置* @throws IOException */@RequestMapping(value = "/grid/imgconf/addimgconf",method = {RequestMethod.POST, RequestMethod.GET},produces = {"text/html;charset=UTF-8"})@ResponseBodypublic String addImgConf(HttpServletRequest request, HttpServletResponse response, BindException errors) throws IOException{String m = "00";MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;Map<String, MultipartFile> fileMap = multipartRequest.getFileMap(); response.setHeader("Access-Control-Allow-Origin", "*");String projectid = Function.dealNull(multipartRequest.getParameter("projectid"));String viewKey = Function.dealNull(multipartRequest.getParameter("viewkey"));String type = Function.dealNull(multipartRequest.getParameter("type"));String remark = Function.dealNull(multipartRequest.getParameter("remark"));try {//唯一性判断int size = 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 (Exception e) {m = "01";logger.error("添加下载图片配置失败" ,e);}

//加<textarea>以解决IE下submit后没有执行回调success函数，这个是jquery easyui form的bug
return "<textarea>" + m + "</textarea>";
}

说明："<textarea>" + m + "</textarea>";和produces = {"text/html;charset=UTF-8"}解决IE下不能执行回调函数success的问题

以上这篇form+iframe解决跨域上传文件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。