ajaxを使用してファイルをアップロードするためのフォームデータを送信

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> 

しかし、その代わりに、フォームの属性としてアクションを指定するので、私はAJAXを使用して電話をかけるしようとすると、物事は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

私は入力<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

AJAXを発射するために、このフォーマットを使用するためにIDを追加し、あなたがFORMDATAにファイルを追加することができた後、FormDataを作成するために持っていると思いますfileがmultipartまたはjqueryの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) { 
     } 
});