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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
//添加对话框
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;
  }  
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/**
* 添加下载图片配置
* @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);
}