上傳文件時Ajax調用未點擊操作方法

Question

我正在使用MVC應用程序，在該應用程序中我使用了一個拖放文件上傳，該文件運行正常，文件正在相應文件夾中上傳。

下面是用於它的示例代碼：

<div id="dropZone" style="width:340px; height:200px">
    <b> Drop your files here or</b> 
</div>
<img id="uploadImg" src="~/Content/images/Cloud-File.gif" alt="uploadFile" style="width:297px; height:155px; display:none" />


$('#dropZone').filedrop({
    url: '@Url.Action("UploadFiles","Home")',
    paramname: 'files',
    maxFiles: 5,
    dragOver: function () {
       //change color
    },
    dragLeave: function () {
      //change color
    },
    drop: function () {
       //change color
    },
    afterAll: function () {

    },
    uploadFinished: function (i, file, response, time)
    {
      //creating file size and showing the file name in list
    }
});

下面是用於它的控制器。

[HttpPost]
public ActionResult UploadFiles(IEnumerable files)
{
    foreach (HttpPostedFileBase file in files)
    {
      //save logic
    }
    return Json("All files have been successfully stored.");
}

直到這里一切都沒問題，之后我還為手動上傳文件添加了一個輸入文件控件。 下面是用於它的jquery ajax調用：

$("#upload").change(function () {
    var fileInfo = $("#upload").prop('files');
    var fileData = new FormData();
    fileData.append('files',fileInfo[0])
    $.ajax({
        type: "POST",
        url: '@Url.Action("UploadFiles", "Home")',
        processData:false,
        // contentType: "application/json; charset=utf-8",
        // data: { files: fileData},
        dataType: "json",
        async:false,
        success: function (response) { UploadBrowseFile(fileInfo[0]); },
        error: function (xhr, status, error) { alert(xhr.responseText); }
    });
});

但這沒有達到相同的控制器動作，並且進程正在移至錯誤功能，由於此手動上載不起作用。 需要幫忙。

Answer 1

您當前未向該方法發送任何數據（ data選項的注釋代碼不正確），並且您具有用於發送FormData contentType選項不正確，並且必須將其設置為false （默認值為'application/x-www-form-urlencoded; charset=UTF-8' ）。

將ajax選項更改為

$.ajax({
    type: "POST",
    url: '@Url.Action("UploadFiles", "Home")',
    processData:false,
    contentType: false, // change
    data: fileData, // change
    dataType: "json",
    async:false,
    success: function (response) { UploadBrowseFile(fileInfo[0]); },
    error: function (xhr, status, error) { alert(xhr.responseText); }
});

您還需要將方法的簽名更改為

[HttpPost]
public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)