Asp.net Mvc多個文件上傳與Ajax錯誤

Question

我試圖用Jquery ajax在mvc中上傳多個文件，但是我有一些問題。

這是我的HTML設計和代碼。

<div id="fileinputdiv">
  <input type="file" name="mainfile" id="mainfile" onchange="OnValueChanged(this)">
</div>
<div id="tab_images_uploader_container" class="text-align-reverse margin-bottom-10">
  <span class="btn green fileinput-button">
                                                <i class="fa fa-plus"></i>
                                                <span><a href="#" id="AddFile"> New Image... </a></span>
  </span>
  <a id="tab_images_uploader_uploadfiles" class="btn btn-primary">
    <input type="button" value="Upload Images" id="btnUpload" name="btnUpload" />
  </a>
</div>

JavaScript代碼...

<script type="text/javascript">
var files = [];  // Creating array for list of files
function OnValueChanged(fileUploadItemId) {           
    var selectedvalue = $(fileUploadItemId).val();
    files.push(selectedvalue);

}
$(document).ready(function () {
    $("#AddFile").click(function (e) {
        e.preventDefault();
        $(" <input type='file' onchange='OnValueChanged(this)'>").appendTo("#fileinputdiv");
    })

    $("#btnUpload").on("click", function () {

        var fileData = new FormData();
        for (var i = 0; i < files.length; i++) {  
            fileData.append(files[i].name, files[i]);  
        }   
            $.ajax({
                url: "/Product/UploadFiles",
                type: "POST",
                contentType: false,
                processData: false,
                data: fileData,
                success: function (result) {
                    alert(result);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });

    })
});

最后是我的功能

    [HttpPost]
    public ActionResult UploadFiles()
    {
        if (Request.Files.Count > 0)
        {
            try
            {
                HttpFileCollectionBase files = Request.Files;
                for (int i = 0; i < files.Count; i++)
                {
                    HttpPostedFileBase file = files[i];
                    string fname;

                    if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
                    {
                        string[] testfiles = file.FileName.Split(new char[] { '\\' });
                        fname = testfiles[testfiles.Length - 1];
                    }
                    else
                    {
                        fname = file.FileName;
                    }

                    fname = Path.Combine(Server.MapPath("~/ProductImages/"), fname);
                    file.SaveAs(fname);
                }
                return Json("File Uploaded Successfully!");
            }
            catch (Exception ex)
            {
                return Json("Error occurred. Error details: " + ex.Message);
            }
        }
        else
        {
            return Json("No files selected.");
        }
    }

我的問題是，當我單擊“上傳文件”按鈕時，沒有任何用Ajax發送到UploadFiles（）函數的數據，我總是收到“未選擇文件”錯誤，但是我使用此代碼進行了測試

for (var i = 0; i < files.length; i++) {
      alert(files[i]);
    }

我能夠顯示所有選中的文件。 我找不到的問題在哪里？

Answer 1

必須更換Request.Files與request.Form.Files 。

Answer 2

由於各種原因，我建議您不要使用Ajax進行異步文件上傳。 一種是在附加FormData並將其獲取到API中時遇到問題，另一種是在訪問HttpContext.Request.Form尤其是在ASP.Net Core中）時出錯。 我的建議是，如果異步上傳是一項必要條件，請使用以下內容，否則您可以在單獨的彈出窗口中以非ajax方式進行操作。

使用以下Javascript代碼：

function uploadAsync(evt){
     if (evt.enctype == "multipart/form-data") {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // Add the response to the desired tag by calling the xhr.responseText
            }
        };
        xhr.onprogress = function(progressEvent){
           // Update your progress here
        }
        xhr.open(evt.method, evt.action, true);
        xhr.send(new FormData(evt));
    }
} 

這段代碼可能導致回發，以防止它使用return false; 調用方法后：

<form id="fileUploadForm" action="your action API" method="post" enctype="multipart/form-data" onsubmit="uploadAsync(this); return false;"> 
   <input name="personalImage" type="file" />
   <input name="coverImage" type="file" />
   <input type="submit" value="submit" />
</form>

現在假設：

public class FileHandlerController: Controller{

    [HttpPost]
    public String GetFileAndVerify(){
         var files = HttpContext.Request.Form.Files;
         // do the process on files
         return "We got them files";
    }
}

或者您可以在ASP.Net Core中使用IFormFile或在ASP.Net 4中使用HttpPostedFile 。

如果使用此方法時遇到任何問題，請在評論中告訴我，以為您提供更多信息並解決您的問題。

更新資料

我已經開發了這種方法的簡潔版本，您可以在這里找到： GitHub

這是用戶手冊：

<form async progress-bar-parent="pbarMain" progress-bar-name="pbar" response-parent="updArea" response="updElement" progress-bar-percentage="pbarPercent" dateset-ajax="true" action="/AdminArea/FilesAPI/PostFile" method="post" enctype="multipart/form-data" >
    <div class="input-group input-group-sm pull-left p-10">
         <input type="file" id="file" name="file" />
         <span class="input-group-btn">
             <input type="submit" class="btn btn-primary" value="Submit" />
         </span>
     </div>
</form>

<div id="pbarMain" class="progress" style="margin-top:20px; width:96%; margin-left:2%; position:relative; display:none;"></div>
<div id="updArea" class="input-group input-group-sm pull-left p-10" style="display:none;">
     <input id="updElement" type="text" class="form-control" value="" />
     <span class="input-group-btn">
         <button class="btn btn-primary" onclick="copyText('#updElement')">Copy</button>
     </span>
</div>

要允許同時上傳多種格式的文件，請在您的表單標簽中包含allow-multi ，例如<form allow-multi class="..." ...> 。 但是，這可能會導致一些UI問題，因為我開發的該版本仍然是Alpha版本。