Ajax serialize（）フォームをプログレッシブにしてファイルをアップロードします。

伝統的なフォームでファイルをアップロードします。

<form id="uploadForm" action="" method="post" enctype="multipart/form-data"> 
   <p>    ：<input type ="file" name="file"/></p> 
   <input type="submit" value="  "/> 
</form>

しかし、伝統的なフォームの提出はページの更新につながるかもしれませんが、場合によっては、ページの更新を望まないです。このような場合は、私たちはすべてAjaxを使って要求します。
serialize()を使ってフォームを逐次的に並べて提出します。

$.ajax({ 
   url: "", 
   type: "POST", 
   data: $('#uploadForm').serialize(), 
   success: function(data) {   
   }, 
   error: function(data) {
   } 
});

以上のように、フォームは‘嚔uplloadForm’.serialize()によって序列化され、formフォームのすべてのパラメータはサービスエンドに伝達される。
しかし、上記のように、一般的なパラメータのみが伝達され、アップロードされたファイルのストリームは、順番に並べられて転送されません。しかし、現在はメインブラウザでFormDataというオブジェクトをサポートしています。このオブジェクトがあれば、Ajax方式で簡単にファイルをアップロードできます。
FormDataを使ってAjax要求を行い、ファイルをアップロードします。

<form id="uploadForm"> 
   <p>    ：<input type="file" name="file" /></p> 
   <input type="button" value="  " onclick="upload()" /> 
</form>
function upload() { 
   var formData = new FormData($("#uploadForm")[0]); 
   $.ajax({ 
     url: '', 
     type: 'POST', 
     data: formData, 
     async: false, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function(data) {
     }, 
     error: function(data) {   
     } 
   }); 
}

以上は小编が绍介したAjax serialize（）フォームを顺列化してファイルをアップロードしています。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。