Asp.net Mvc複数のファイルをajaxでいくつかのエラーでアップロードする

Question

MvcでJquery ajaxで複数のファイルをアップロードしようとしていますが、いくつか問題があります。ここで

その私の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."); 
     } 
    } 

私は「ファイルのアップロード」ボタンをクリックしたときに私の質問はUploadFiles（）関数にAJAXを送るなしすべてのデータは、私はいつも「いいえファイル選択ません」というエラーを取得しているが、私はこのコード

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

でテスト

私は選択されたすべてのファイルを表示することができます。私は見つけることができなかった問題はどこにありますか？

Answer 1

Request.Filesをrequest.Form.Filesに置き換える必要があります。

Answer 2

さまざまな理由で非同期ファイルアップロードにAjaxを使用しないことをお勧めします。 1つは、FormDataを添付してAPIで取得する際に問題が発生し、もう1つは特にASP.Net CoreのHttpContext.Request.Formにアクセスするとエラーになることです。私のお勧めは、非同期アップロードが要件の場合は次を使用することです。そうでない場合は、別のポップアップウィンドウでnon-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> 

今仮定：

​​を

またはIFormFileをASP.Net Coreまたはに使用できますASP.Net 4.

このアプローチを使用する際に問題が発生した場合は、コメントで詳細を説明し、問題を解決するために私にお知らせください。私はあなたがここで見つけることができます。このアプローチの控えめなバージョンを開発している

更新：

<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> 

は、複数のフォームでファイルをアップロードできるようにするには：ここGitHub

マニュアルです同時に、allow-multiを<form allow-multi class="..." ...>のようなフォームタグに含めます。しかし、これは私が開発したこのバージョンはまだアルファベットであるため、UIの問題が発生する可能性があります。