[英]Multiple File Upload in Web Api using jQuery Ajax
我在使用jQuery Ajax和Web API上傳文件時遇到問題。 當我對API進行POST時,我沒有在控制器中上傳文件。
在我的HTML中,我有幾個帶有class =“ file”的文件輸入,如下所示:
<form id="edit" enctype="multipart/form-data">
<input class="file" type="file" name="field_custom_file" accept='image/*' />
<input class="file" type="file" name="field_custom_file" accept='image/*' />
<input class="file" type="file" name="field_custom_file" accept='image/*' />
</form>
另外,我有一個執行Javascript函數的按鈕:
function send() {
var files = $('.file')[0].files;
if (files.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < files.length; x++) {
data.append("file" + x, files[x]);
}
$.ajax({
type: "POST",
url: '/api/tripgroups',
contentType: false,
processData: false,
data: data,
success: function (result) {
toastr.success('Trip Group was updated!');
},
error: function (xhr, status, p3, p4) {
var err = "Error " + " " + status + " " + p3 + " " + p4;
if (xhr.responseText && xhr.responseText[0] == "{")
err = JSON.parse(xhr.responseText).Message;
console.log(err);
},
enctype: 'multipart/form-data',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
});
} else {
alert("This browser doesn't support HTML5 file uploads!");
}
}
}
最后,在我的Web api控制器中,如果嘗試訪問HttpContext.Current.Request.Files,則會得到一個空集合,並且如果嘗試訪問如下內容:
var streamProvider = new MultipartFormDataStreamProvider("images");
await Request.Content.ReadAsMultipartAsync(streamProvider);
然后我得到這個錯誤:
提供了無效的“ HttpContent”實例。 它沒有以“ multipart /”開頭的內容類型標頭。 參數名稱:內容
提前致謝。
您正在使用API,因此您的請求是HttpResponseMessage。
如果您不着急,建議您閱讀這篇文章。 http://www.asp.net/web-api/overview/advanced/sending-html-form-data-part-2
如果確實有期限,建議您一次發布1個文件,並說明一次上傳多個文件的局限性。 否則,請使用第三方API自行學習並進行反向工程。
我終於弄明白了。
我更改了Ajax調用,因為@ guest271314建議獲取所有文件輸入:
var files = $('.file');
if (files.length > 0) {
if (window.FormData !== undefined) {
var data = new FormData();
for (var x = 0; x < files.length; x++) {
data.append("file" + x, files[x].files[0]);
}
$.ajax({
type: "POST",
url: '/api/tripgroups',
contentType: false,
processData: false,
data: data,
success: function (result) {
toastr.success('Trip Group was updated!');
}
});
} else {
alert("This browser doesn't support HTML5 file uploads!");
}
}
而且主要問題在我的控制器上,因為我還有另一個參數
public async Task<HttpResponseMessage> Post(SomeClass param)
當我刪除該參數時,它將正確接收文件。
我仍然不知道如何在同一請求中接收JSON對象和文件(如果可能的話),但我拆分為2個不同的控制器,效果很好。
謝謝大家的幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.