form+iframe解决跨域上传文件的方法
(1) jsp代码：
<formid="form"name="form"enctype="multipart/form-data"method="post"target="hidden_frame"> <tablestyle="border:0;width:100%;text-align:middle;"> <trstyle="border:0;height:20px;width:100%;"> <tdstyle="border:0;width:75px;height:20px;line-height:20px;">控件标识</td> <td> <inputid="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><inputid="type"name="type"class="easyui-combobox"valueField="id"textField="text"panelHeight="auto"/></td> </tr> <tr> <td>备注</td> <tdcolspan=3> <textareaid="remark"name="remark"onkeyup="check()"placeholder="备注不能超过300个字。"style="width:200px;height:80px;"></textarea> </td> </tr> <tr> <td>资源文件：</td> <td> <inputtype="file"id="file"name="file"style="height:25px;width:200px;"onchange="fileChange(this);"> <inputtype="hidden"name="projectid"id="projectid"> <inputtype="hidden"name="downimageconfigid"id="downimageconfigid"> <inputtype="hidden"name="iskeychange"id="iskeychange"> <inputtype="hidden"name="isnopic"id="isnopic"> <iframename="hidden_frame"id="hidden_frame"style="display:none"></iframe> </td> </tr> <tr> <td></td> <td><divstyle="color:red;margin-top:10px;">图片大小必须小于500K。</div></td> </tr> </table> </form>
说明：form中的target指向iframe中的name。这点要注意。
(2) js代码：
//添加对话框
functioninitDialog(){
$('#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{//【编辑】
//控件标识是否改变
variskeychange;
if(selected.viewkey==$('#viewkey').val()){//控件标识没有改变
iskeychange='no';
}else{
iskeychange='yes';
}
varisnopic;
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();
}
}]
});
}
//重置
functionreset(){
$('#ut_add').linkbutton('enable');
vartarget=$('#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');
}
}
/**
*文本区域限制长度
*/
functioncheck(){
varcontent=$('#remark').val();
len=content.length;
varmaxlen=300;
if(len>maxlen){
alert("字数太长，已被截断为300字!");
$('#remark').val(content.substr(0,maxlen));
}
}
//inputtype='file'置位操作
functiondeleteFile(file){
varie=(navigator.appVersion.indexOf("MSIE")!=-1);//IE
varff=(navigator.userAgent.indexOf("Firefox")!=-1);//Firefox
if(ie){
refreshUploader($("input[name="+file+"]")[0]);
}
else{
$("input[name="+file+"]").attr("value","");
}
}
functionrefreshUploader(file){
varfile2=file.cloneNode(false);
file2.onchange=file.onchange;
file.parentNode.replaceChild(file2,file);
}
//检测文件大小和类型
functionfileChange(target){
//检测上传文件的类型
if(!(/(?:jpg|gif|png|jpeg)$/i.test(target.value))){
alert("只允许上传jpg|gif|png|jpeg格式的图片");
if(window.ActiveXObject){//forIE
target.select();//selectthefile,andclearselection
document.selection.clear();
}elseif(window.opera){//foropera
target.type="text";target.type="file";
}elsetarget.value="";//forFF,Chrome,Safari
return;
}else{
return;//alert("ok");//oryoucandonothinghere.
}
//检测上传文件的大小
varisIE=/msie/i.test(navigator.userAgent)&&!window.opera;
varfileSize=0;
if(isIE&&!target.files){
varfilePath=target.value;
varfileSystem=newActiveXObject("Scripting.FileSystemObject");
varfile=fileSystem.GetFile(filePath);
fileSize=file.Size;
}else{
fileSize=target.files[0].size;
}
varsize=fileSize/1024;
if(size>(500)){
alert("文件大小不能超过500KB");
if(window.ActiveXObject){//forIE
target.select();//selectthefile,andclearselection
document.selection.clear();
}elseif(window.opera){//foropera
target.type="text";target.type="file";
}else{
target.value="";//forFF,Chrome,Safari
}
return;
}else{
return;
}
}
(3)后台java代码：
/**
*添加下载图片配置
*@throwsIOException
*/
@RequestMapping(value="/grid/imgconf/addimgconf",method={RequestMethod.POST,RequestMethod.GET},produces={"text/html;charset=UTF-8"})
@ResponseBody
publicStringaddImgConf(HttpServletRequest
request,HttpServletResponseresponse,BindExceptionerrors)throwsIOException{
Stringm="00";
MultipartHttpServletRequestmultipartRequest=(MultipartHttpServletRequest)request;
Map<String,MultipartFile>fileMap=multipartRequest.getFileMap();
response.setHeader("Access-Control-Allow-Origin","*");
Stringprojectid=Function.dealNull(multipartRequest.getParameter("projectid"));
StringviewKey=Function.dealNull(multipartRequest.getParameter("viewkey"));
Stringtype=Function.dealNull(multipartRequest.getParameter("type"));
Stringremark=Function.dealNull(multipartRequest.getParameter("remark"));
try{
//唯一性判断
intsize=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(Exceptione){
m="01";
logger.error("添加下载图片配置失败",e);
}
//加<textarea>以解决IE下submit后没有执行回调success函数，这个是jqueryeasyuiform的bug
return"<textarea>"+m+"</textarea>";
}
说明："<textarea>"+m+"</textarea>";和produces={"text/html;charset=UTF-8"}解决IE下不能执行回调函数success的问题
以上这篇form+iframe解决跨域上传文件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。