form+iframe解決跨域上傳文件

(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" οnkeyup="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" οnkeyup="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;" οnchange="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.οnchange= 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的問題