使用ajaxupload.js插件上传图片不成功问题----RTFSC

本文链接：https://blog.csdn.net/honghailiang888/article/details/51487422

一、项目中使用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>

应该是请求路径错误。发现请求路径就是不正确http://192.168.xxx.xxx:9990/cloud/file/fileup.do?actionType=ajaxremove&filePath=&ranNum=0.09392175101675093&ranNum=0.4666899552

路径中多了/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;
 }

看到这里对其多出的/cloud就不足为怪了。本来路径是http://192.168.xxx.xxx:9990/cloud/unpack/pickupAppeal.jsp?bean.id=100451&status=4&login_success=true

四、解决

如下修改

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;
 }