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

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

(1)  jsp代码：

说明：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;

varhttp:// 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 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 "" + m + "";

}

//上传图片

Map 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);

}

//加以解决IE下submit后没有执行回调success函数，这个是jquery easyui form的bhttp://ug

return "" + m + "";

}

说明："" + m + "";和produces = {"text/html;charset=UTF-8"}解决IE下不能执行回调函数success的问题

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。