首页 > 编程 > JavaScript > 正文

form+iframe解决跨域上传文件的方法

2019-11-19 18:56:37
字体:
来源:转载
供稿:网友

(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解决跨域上传文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表