form+iframe解決跨域上傳文件的方法
更新時(shí)間：2016年11月18日 09:55:41 投稿：jingxian
下面小編就為大家?guī)?lái)一篇form+iframe解決跨域上傳文件的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
(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;">控件標(biāo)識(shí)</td> <td> <input id="viewkey" name="viewkey" style="width:200px;" type="text" maxlength="300" placeholder="控件標(biāo)識(shí)不能超過(guò)30個(gè)字。" class="easyui-validatebox" onkeyup="check()" required="true" missingMessage="參數(shù)名稱(chēng)不可為空."/> </td> </tr> <tr> <td>更新類(lèi)型</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="備注不能超過(guò)300個(gè)字。" 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>
說(shuō)明：form中的target指向iframe中的name。這點(diǎn)要注意。
(2) js代碼：
//添加對(duì)話(huà)框
function initDialog(){
$('#imgconf-dialog').dialog({
modal:true,
closable:false,
top: 20,
buttons:[{
id:'ut_add',
text:'確定',
iconCls:'icon-ok',
handler:function(){
//表單注冊(cè)事件
$('#form').form({
success:function(data){//提交成功后的回調(diào)函數(shù)
if(data === '00'){
jqueryAlert('操作成功');
}
if(data === '03'){
$.messager.alert(global.title,'主鍵為空!','warning');
$('#ut_add').linkbutton('enable');
return;
}
if(data === '02'){
$.messager.alert(global.title,'已存在的控件標(biāo)識(shí)!','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,'您尚未輸入控件標(biāo)識(shí)!','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 {//【編輯】
//控件標(biāo)識(shí)是否改變
var iskeychange;
if(selected.viewkey == $('#viewkey').val()){//控件標(biāo)識(shí)沒(méi)有改變
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');
}
}
/**
* 文本區(qū)域限制長(zhǎng)度
*/
function check(){
var content = $('#remark').val();
len = content.length;
var maxlen = 300;
if(len > maxlen){
alert("字?jǐn)?shù)太長(zhǎng)，已被截?cái)酁?00字!");
$('#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);
}
//檢測(cè)文件大小和類(lèi)型
function fileChange(target){
//檢測(cè)上傳文件的類(lèi)型
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.
}
//檢測(cè)上傳文件的大小
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("文件大小不能超過(guò)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) 后臺(tái)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("已存在的控件標(biāo)識(shí)!");
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后沒(méi)有執(zhí)行回調(diào)success函數(shù)，這個(gè)是jquery easyui form的bug
return "<textarea>" + m + "</textarea>";
}
說(shuō)明："<textarea>" + m + "</textarea>";和produces = {"text/html;charset=UTF-8"}解決IE下不能執(zhí)行回調(diào)函數(shù)success的問(wèn)題
以上這篇form+iframe解決跨域上傳文件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
通過(guò)微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例
這篇文章主要介紹了通過(guò)微信公眾平臺(tái)獲取公眾號(hào)文章的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
UI即User Interface（用戶(hù)界面）的簡(jiǎn)稱(chēng)。UI設(shè)計(jì)則是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)2012-06-06
讓瀏覽器非阻塞加載javascript的幾種方法小結(jié)
通常大多數(shù)瀏覽器是并行下載資源的，但由于外部腳本的特殊性例如通過(guò)腳本改變文檔的DOM結(jié)構(gòu)、腳本之間的存在依賴(lài)關(guān)系、使用document.write 向頁(yè)面輸出HTML等。2011-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript中參數(shù)傳遞三種方式：按值傳遞、引用傳遞和共享傳遞,文中的示例代碼講解詳細(xì),感興趣的可以了解下2023-09-09
Three.js開(kāi)發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過(guò)程總結(jié)
這篇文章主要給大家介紹了關(guān)于利用Three.js開(kāi)發(fā)實(shí)現(xiàn)3D地圖的實(shí)踐過(guò)程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用three.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
js數(shù)組是js部分非常重要的知識(shí)，有時(shí)我們有這么個(gè)需求js數(shù)組刪除指定元素,下面這篇文章主要給大家介紹了關(guān)于js刪除數(shù)組中指定元素的幾種方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
JavaScript 實(shí)現(xiàn)鼠標(biāo)拖動(dòng)元素實(shí)例代碼
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)鼠標(biāo)拖動(dòng)元素實(shí)例代碼,需要的朋友可以參考下2014-02-02
這篇文章主要為大家詳細(xì)介紹了Canvas實(shí)現(xiàn)微信紅包照片效果，用canvas及css3結(jié)合，實(shí)現(xiàn)紅包照片的效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Javascript實(shí)現(xiàn)蘋(píng)果懸浮虛擬按鈕
本文給大家分享的是使用javascript實(shí)現(xiàn)仿制蘋(píng)果的懸浮虛擬按鈕的代碼，非常的簡(jiǎn)單，給大家一個(gè)思路，大家可以根據(jù)自己的情況自由擴(kuò)展。2016-04-04
JavaScript中鏈?zhǔn)秸{(diào)用之研習(xí)
方法鏈一般適合對(duì)一個(gè)對(duì)象進(jìn)行連續(xù)操作(集中在一句代碼)。一定程度上可以減少代碼量，缺點(diǎn)是它占用了函數(shù)的返回值。2011-04-04