使用Ajax發佈多部分/表單數據

出於某種原因，我無法使用以下腳本正常工作，但在未使用腳本時提交表單時所有工作都應如此，但是在使用腳本僅提交表單時在post變量中獲取類別和描述，但沒有文件。所以我的問題是如何讓腳本發佈文件變量也。使用Ajax發佈多部分/表單數據

阿賈克斯

$("#img-post").click(function() 
{ 
    $("#imgupload").submit(function(e) 
    { 
     var postData = $(this).serializeArray(); 
     var formURL = $(this).attr("action"); 
     $.ajax(
     { 
      url : formURL, 
      type: "POST", 
      data : postData, 
      success:function(data, textStatus, jqXHR) 
      { 
       $("#img").html('<pre><code class="prettyprint">'+data+'</code></pre>'); 

      }, 
      error: function(jqXHR, textStatus, errorThrown) 
      { 
       alert('Error'); 
       document.getElementById('enquiry').style.visibility = 'hidden'; 
      } 
     }); 
     e.preventDefault(); //STOP default action 
    }); 

    $("#imgupload").submit(); //SUBMIT FORM 
});

HTML

<div class="img" id="img"></div> 

<form name="imgupload" id="imgupload" action="upload.php" method="post" enctype="multipart/form-data"> 
<input name="category" id="category" type="text" /> 
<input name="file" id="file" type="file" /> 
<textarea name="discription" id="discription" cols="68%" rows="8"></textarea><br> 
<input type="button" id="img-post" name="img-post" value="Add" /> 
</form>

來源

2014-03-31 Malcolm

無法完成。看到這裏http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – andrew

@andrew是它可以完成，該鏈接是非常古老的。見下面的答案。 –

相似的http://stackoverflow.com/questions/18519771/no-data-received-from-files – Musa

從文件中的數據選擇元素未被序列

從文檔頁面摘自：

https://api.jquery.com/serializeArray/

但是，你可以用jQuery的Ajax表單插件實現這一這裏找到：

http://malsup.com/jquery/form/

，因爲它不僅捕獲表格數據（包括文件），這個插件是好的您可以輕鬆發送額外的$_POST數據以及您的表單中的ajax調用的data屬性。

來源

2014-03-31 20:14:05

謝謝你，插件聽起來很有希望我會研究它。 – Malcolm

可能值得注意的是，當xhr2在舊瀏覽器中不可用時，插件會回退到使用iframe https://github.com/malsup/form/ – andrew

感謝andrew，我希望能夠清楚iframe，但如果它只能回退到舊的瀏覽器，我可以處理:) – Malcolm

使用Ajax發佈多部分/表單數據

回答

相關問題