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


Posted in Javascript onNovember 18, 2016

(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"})
@ResponseBody
public 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解决跨域上传文件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
javascript入门之string对象【新手必看】
Nov 22 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 #Javascript
微信小程序开发实战教程之手势解锁
Nov 18 #Javascript
JavaScript之WebSocket技术详解
Nov 18 #Javascript
仿iframe效果Aajx文件上传实例
Nov 18 #Javascript
JavaScript之cookie技术详解
Nov 18 #Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 #Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 #Javascript
You might like
PHP 程序员也要学会使用“异常”
2009/06/16 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
用python登录Dr.com思路以及代码分享
2014/06/25 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
python读取Excel表格文件的方法
2019/09/02 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
python 19个值得学习的编程技巧
2020/08/15 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
优质服务口号
2014/06/11 职场文书
学校联谊协议书
2014/09/16 职场文书
科技活动周标语
2014/10/08 职场文书
荒岛余生观后感
2015/06/09 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
Python一些基本的图像操作和处理总结
2021/06/23 Python
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL