关于Ajax通过纯javascript上传图像

About Ajax Upload image by pure javascript

本文关键字：图像 javascript Ajax 关于      更新时间：2023-09-26

我想使用FormData Object来打包图像并通过Ajax发送它。但是我得到的是:

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);	    
  showPanel.replaceChild(showPanel.firstChild,showPanel.lastChild);
		
//first time what i wrote is using apprnd(); 
//var fd = new FormData();
//fd.append("myFile",mfile.files[0]);
	   
//second time i through input all form to create a FormData object
  fd = new FormData(getIds("picForm"));
		
  xhr = new XMLHttpRequest();
		
/*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>

我的代码有什么问题?,为什么?

谢谢你的回答

上传文件时，必须在输入为change d时存储文件。下面是本教程的一小段代码:

// 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。

相关文章：