使用ajaxupload.js外掛上傳圖片不成功問題----RTFSC
阿新 • • 發佈：2019-02-20
一、專案中使用ajaxupload.js外掛上傳圖片，返回值不正確
<head><title>對不起，系統故障，您訪問的頁面暫時無法訪問!</title></head> 返回的是error404.jsp頁面
二，看web.xml中配置
<error-page>
<error-code>404</error-code>
<location>/jsp_lib/common/error404.jsp</location>
</error-page>路徑中多了/cloud what? why? 讀原始碼（RTFSC）
三、看其實現邏輯
var ajaxChosePic = function(inputName,widthStr,heightStr,fileSize){ var oldPicPath = document.getElementsByName(inputName+"OldRealPath")[0].value; var picwh = document.getElementsByName(inputName+"wh")[0].value; var isEdit = document.getElementsByName(inputName+"editUrl")[0].value; if(oldPicPath != '' && oldPicPath != ' ' && oldPicPath != null && oldPicPath != 'null' && "true" == isEdit){ var picWidth = "0"; var picHeight = "0"; if(picwh != '' && picwh != ' ') { var wh = picwh.split(','); if(wh != null && wh.length >0){ picWidth = wh[0]; picHeight = wh[1]; } } initPic(inputName,oldPicPath,widthStr,heightStr,picWidth,picHeight); } new AjaxUpload(inputName+"InputFile",{ action:contentPath+"/file/fileup.do?actionType=upload&fileSize="+fileSize+"&ranNum="+Math.random(), autoSubmit:true, name:inputName, onSubmit:function(file, extension){ if (extension && /^(pdf|jpg|png|jpeg|gif|PDF|JPG|PNG|JPEG|GIF)$/.test(extension)){ hideFileUp(inputName+"a"); showFileUp(inputName+"adiv") document.getElementById(inputName+"Preview").style.background = "url("+contentPath + "/img/fileUpload/tpwait.gif) center center no-repeat"; } else { //$("#loading").html("你所選擇的檔案不受系統支援"); //$("#loading").show(); alert("你所選擇的檔案不受系統支援") return false; } }, onComplete: function(file, response){ var dataobj=eval("(" + response + ")"); var errorMessage = dataobj.rsp.errorMessage; if(errorMessage != '' && errorMessage != ' '){ showFileUp(inputName + "a"); hideFileUp(inputName + "adiv"); alert("檔案上傳失敗,檔案大小最大可傳"+fileSize + "M"); document.getElementById(inputName+"Preview").innerHTML=""; document.getElementById(inputName+"Preview").style.background = "url("+contentPath + "/img/fileUpload/zwtp.png) center center no-repeat"; document.getElementsByName(inputName+"FileUrl")[0].value=""; document.getElementById(inputName+"Preview").setAttribute("onmouseover",""); document.getElementById(inputName+"Preview").setAttribute("onmouseout",""); }else{ var fileUrl = dataobj.rsp.fileUrl; var realPath = dataobj.rsp.realPath; var img = new Image();//構造JS的Image物件 img.src = fileUrl;//將本地圖片賦給image物件 setTimeout(function(){ initPic(inputName,fileUrl,widthStr,heightStr,img.width,img.height); document.getElementsByName(inputName+"editUrl")[0].value="false"; document.getElementsByName(inputName+"FileUrl")[0].value=realPath; },500); } } }); };
其中contentPath就是獲取的路徑，看其實現
var contentPath = getContextPath();//獲取訪問路徑
function getContextPath(){ var contextPath = window.location.protocol + "//" + window.location.host; var content = document.location.pathname; if(isStartWith(content,"/store/") || isStartWith(content,"/fg/") || isStartWith(content,"/bg/") || isStartWith(content,"/usercenter/") || isStartWith(content,"/account/")){ content = ""; }else{ var index =content.substr(1).indexOf("/"); content = content.substr(0,index+1); delete index; } if(content != null && content != '' && content != ' ' && content.indexOf("store") && content.indexOf("/bg")){ if(isStartWith(content,"/")){ contextPath = contextPath + content; }else{ contextPath = contextPath +"/"+ content; } } return contextPath; }
四、解決
如下修改
function getContextPath(){
var contextPath = window.location.protocol + "//" + window.location.host;
var content = document.location.pathname;
if(isStartWith(content,"/store/") || isStartWith(content,"/fg/") || isStartWith(content,"/bg/") || isStartWith(content,"/usercenter/") || isStartWith(content,"/account/") || isStartWith(content,"/cloud/")){
content = "";
}else{
var index =content.substr(1).indexOf("/");
content = content.substr(0,index+1);
delete index;
}
if(content != null && content != '' && content != ' ' && content.indexOf("store") && content.indexOf("/bg")){
if(isStartWith(content,"/")){
contextPath = contextPath + content;
}else{
contextPath = contextPath +"/"+ content;
}
}
return contextPath;
}