ajax를 사용하여 파일 업로드 용 formdata 보내기

Question

ajax로 양식 데이터를 사용하여 이미지를 업로드하려고합니다. 아래 줄은 잘 작동하고 내 로컬 컴퓨터에 이미지를 저장하는 것 같습니다.

<form ref='uploadForm' id='uploadForm' action='/tab10/uploadImage' method='post' encType="multipart/form-data"> 
<input type="file" class="btn btn-default" name="file" /> 
<input type='submit' class="btn btn-default" value='Broadcast Image' /> 
</form> 

하지만 그 대신 양식 속성으로 동작을 지정하는, 내가 아약스를 사용하여 전화를 걸 때, 일이 fine.Below을 작동하는 것 같지 않았다 내가 포스트 API를 만들기 위해 사용하고있는 코드입니다 ajax를 사용하여 호출하십시오.

HTML

<form ref='uploadForm' id='uploadForm' encType="multipart/form-data"> 

JQuery와는

$("form#uploadForm").submit(function (event) { 
      //disable the default form submission 
      event.preventDefault(); 
      var formData = $(this).serialize(); 
      console.log(formData); 
      $.ajax({ 
       url: '/tab10/uploadImage', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function() { 
        alert('Form Submitted!'); 
       }, 
       error: function(){ 
        alert("error in ajax form submission"); 
       } 
      }); 
      return false; 
     }); 

아래는 내가 이미지를 저장하기 위해 사용하고있는 코드입니다.

난 내 uploadimage 기능의 요청 데이터를 확인

exports.uploadImage = function(req, resp) { 
var res = {}; 
let file = req.files.file; 
file.mv('./images/image', function(err) { 
if (err) { 
    res.status = 500; 
    res.message = err; 
    // return res.status(500).send(err); 
    return resp.send(res); 
} 
res.status = 200; 
res.message = 'File uploaded!'; 
return resp.send(res); 
}); 
}; 

, 요청에 "파일"이라는 매개 변수가 후자의 경우에 전송되지 않는 것으로 보인다.

Answer 1

사용

$("#uploadForm").submit(function() { 
     var formData = new FormData(this); 
     $.ajax({ 
      url: '/tab10/uploadImage', 
      type: 'POST', 
      data: formData, 
      async: false, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function() { 
       alert('Form Submitted!'); 
      }, 
      error: function(){ 
       alert("error in ajax form submission"); 
      } 
     }); 
     return false; 
    }); 

Answer 2

나는 당신이 formData에 파일을 추가 할 수 있습니다 후, FormData을 만들 입력 <input type="file" class="btn btn-default" name="file" id="uploadFile"/>

$("form#uploadForm").submit(function (event) { 
     //disable the default form submission 
     event.preventDefault(); 
     var formData = new FormData(); 
     formData.append('file',$('#uploadFile')[0].files[0]); 
     $.ajax({ 
      url: '/tab10/uploadImage', 
      type: 'POST', 
      data: formData, 
      contentType: false, 
      processData: false, 
      success: function() { 
       alert('Form Submitted!'); 
      }, 
      error: function(){ 
       alert("error in ajax form submission"); 
      } 
     }); 

    }); 

Answer 3

를 사용하여 화재로이 형식 아약스에 ID를 추가 할 수 있다고 생각 파일이 멀티 파트 또는 jquery이기 때문에 serialize() 메서드는 멀티 파트 콘텐츠를 serialize하지 않으므로 수동으로 설정해야합니다.

//get choosen file 
var fileContent = new FormData(); 
fileContent.append("file",$('input[type=file]')[0].files[0]); 
$.ajax({ 
    type: "POST", 
     enctype:"multipart/form-data", 
     url: "/tab10/uploadImage", 
     data: fileContent, 
     processData: false, 
     contentType: false, 
     success: function(response) { 
     } 
});