關於Ajax上傳圖像爲純javascript javascript

我想使用FormData對象打包圖像並通過Ajax發送。但我得到的是：關於Ajax上傳圖像爲純javascript javascript

產生java.io.IOException： org.apache.tomcat.util.http.fileupload.FileUploadException：在請求被拒絕，因爲沒有多邊界發現

這是我的代碼：

function getId(arg) { 
 
    return document.getElementById(arg); 
 
} 
 

 
function doFirst(){ 
 
    showPanel = getId("showPanel"); 
 
    sendbtn = getId("sendbtn"); 
 
    mfile = getId("mFile"); 
 
    mfile.addEventListener('change',showUp,false); 
 
} 
 

 
function showUp(){ 
 
    var fReader = new FileReader(); 
 
    fReader.readAsDataURL(mfile.files[0]); 
 
    fReader.onload = function (e){ 
 
    mImg = document.createElement("img"); 
 
    mImg.src=e.target.result; 
 
    mImg.id ="mImg"; 
 
    showPanel.removeChild(showPanel.firstChild); 
 
    showPanel.appendChild(mImg); \t  
 
    showPanel.replaceChild(showPanel.firstChild,showPanel.lastChild); 
 
\t \t 
 
//first time what i wrote is using apprnd(); 
 
//var fd = new FormData(); 
 
//fd.append("myFile",mfile.files[0]); 
 
\t  
 
//second time i through input all form to create a FormData object 
 
    fd = new FormData(getIds("picForm")); 
 
\t \t 
 
    xhr = new XMLHttpRequest(); 
 
\t \t 
 
/*this section just for test 
 
xhr.onreadystatechange = function(){ 
 
console.log("readyState"+xhr.readyState); 
 
console.log("status"+xhr.status); 
 
}*/ 
 

 
    xhr.open("post","AddMemberPic"); 
 
//xhr.setRequestHeader("Content-Type","multipart/form-data"); 
 
    xhr.send(fd); 
 
    } 
 
} 
 
window.onload = doFirst;

<div id="showPanel">upload picture</div> 
 
    <form action = "AddMemberPic" method = "post" id="picForm" enctype="multipart/form-data"> 
 
    <input type="file" name="mFile" id="mFile"> 
 
    </form>

我的代碼有什麼問題？爲什麼？

感謝您的回答。

來源

2016-09-30 Chiming Hsu

如果您將xhr.setRequestHeader行註釋掉，它是否會神奇地開始工作？ – epascarello

我曾試過。但阿賈克斯不工作.. –

「但阿賈克斯不工作」 - 這不是一個有用的問題描述。當你解決epascarello指出的問題時：你會得到什麼錯誤信息？瀏覽器開發人員工具的「網絡」選項卡中顯示哪些數據？ – Quentin

上傳文件時，如果輸入爲change d，則必須存儲文件d。下面有一個小的片段從this tutorial：

// Variable to store your files 
var files; 

// Add events 
$('input[type=file]').on('change', prepareUpload); 

// Grab the files and set them to our variable 
function prepareUpload(event) 
{ 
    files = event.target.files; 
}

它使用jQuery的，但可以很容易地轉移到香草的JavaScript。

來源

2016-09-30 17:59:01

謝謝！我會嘗試。 –

關於Ajax上傳圖像爲純javascript javascript

回答

相關問題