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 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JavaScript函数详解
Nov 17 Javascript
15款jQuery分布引导插件分享
Feb 04 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
基于原生js淡入淡出函数封装(兼容IE)
Oct 20 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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/12/18 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
JavaScript bold方法入门实例(把指定文字显示为粗体)
2014/10/17 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
多种js图片预加载实现方式分享
2016/02/19 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
python实现括号匹配的思路详解
2018/08/23 Python
使用pip安装python库的多种方式
2019/07/31 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
python 利用toapi库自动生成api
2020/10/19 Python
在Python中实现字典反转案例
2020/12/05 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
PHP如何与mysql建立链接
2013/05/05 面试题
2014年社区植树节活动方案
2014/02/28 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
医院标语大全
2014/06/23 职场文书
暑假学习心得体会
2014/09/02 职场文书
信用卡工资证明范本
2014/10/17 职场文书
2014年新教师工作总结
2014/11/08 职场文书
小学教师教学随笔
2015/08/14 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书