О Ajax загрузить изображение pure javascript

Я хочу использовать объект FormData для упаковки изображения и отправки его через Ajax.
Но что я получаю это:

java.io.IOException:
org.апаш.кот.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>

Что не так в моем коде? И почему?

Спасибо за ответы.

1 ответ

  1. При загрузке файлов вы должны сохранить файл, Когда ваш ввод changed.
    Вот небольшой фрагмент из этого учебника:

    // 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 vanilla.