国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > 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解決跨域上傳文件的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 湟源县| 汶川县| 岳阳市| 丹东市| 常山县| 盖州市| 镇原县| 泊头市| 玉山县| 惠来县| 敦化市| 乌鲁木齐市| 新安县| 竹溪县| 常宁市| 上林县| 浏阳市| 新巴尔虎左旗| 开鲁县| 塘沽区| 济南市| 桃园县| 长春市| 府谷县| 嘉善县| 新安县| 大新县| 石屏县| 疏勒县| 张北县| 镇江市| 宁陵县| 金阳县| 万源市| 进贤县| 榆中县| 新民市| 修武县| 昌邑市| 喜德县| 德庆县|