ASP NET MVC RAZOR上傳多個圖片FileList

Question

我是新的asp網絡，我有一個圖像列表，我想通過JavaScript發送到控制器。

我正在使用FileList，這裏是一個例子。 .Create.cshtml

<div class="form-group"> 
    @Html.LabelFor(model => model.description, "Escolha as Imagens", htmlAttributes: new { @class = "control-label col-md-2" }) 
    <input id="files" type="file" name="files[]" /> 
    <br> 
    <div id="preview"></div> 
</div> 
@section Scripts{ 
    <script type="text/javascript"> 
     function handleFileSelect(evt) { 

      var files = evt.target.files; 
      var f = files[0]; 
      //kiem tra co fai file anh 
      if (f.type.match('image.*')) { 
       var reader = new FileReader(); 

       reader.onload = (function(theFile) { 
        return function(e) { 
         var span = document.createElement('span'); 
         span.innerHTML = [ 
          '<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name), 
          '"/><span class="remove_img_preview"></span>' 
         ].join(''); 
         document.getElementById('preview').insertBefore(span, null); 
        }; 
       })(f); 

       reader.readAsDataURL(f); 
      } 
     } 

     $('#files').change(function(evt) { 
      handleFileSelect(evt); 
     }); 
     $('#preview').on('click', 
      '.remove_img_preview', 
      function() { 
       $(this).parent('span').remove(); 
      }); 

     $('#btnSave').click(function() { 

      $.ajax({ 
       url: '/Dishes/Create', 
       data: { files: files }, 
       type: "POST", 
       cache: false, 
       datatype: "html", 
       success: function(data) { 
        console.log(data); 
       }, 
       error: function(jqXhr, textStatus, errorThrown) { 
        //do your own thing 
        alert("fail"); 
       } 
      }); 
     }); 

    </script> 
} 
</fieldset> 
<div class="form-group"> 
    <div class="footer text-center"> 
     <button class="btn btn-fill btn-info" name="btnSave" id="btnSave">Inserir novo</button> 
    </div> 
</div> 

Controller.cs

public ActionResult Create() 
    { 
     ViewBag.idTypeDish = new SelectList(db.TypeDish, "idTypeDish", "name"); 
     return View(); 
    } 



    // POST: Dishes/Create 
    [HttpPost] 
    public ActionResult Create(IEnumerable<HttpPostedFileBase> files) 
    { 


     return View(); 

    } 

在控制器，文件總是空。 我正在使用該示例，http://jsfiddle.net/Lwczca6p/1/，我只是適應了我的項目。

Answer 1

你有幾個問題。首先，您嘗試在您的AJAX中使用files，但該變量是在另一個函數的範圍內定義的（即您在此處無法訪問它）。其次，當使用jQuery的$.ajax來進行文件上傳時，您需要將processData選項設置爲false。下面是我如何處理它：

$('#MyForm').on('submit', function (e) { 
    e.preventDefault(); 
    var formData = new FormData(this); // `this` is the form instance 
    $.ajax({ 
     url: '/path/to/handler', 
     type: 'POST', 
     data: formData, 
     processData: false, 
     contentType: 'multipart/form-data', 
     success: function (data, textStatus, jqXHR) { 
      // do something on success 
     }, 
     error: function (jqXHR, textStatus, errorThrown) { 
      // do something on error 
     } 
    }); 
}); 

Answer 2

試試這個，首先要建立您的視圖模型：

public class FileModel 
{ 
    [Required(ErrorMessage ="Please select file.")] 
    [Display(Name ="Browse File")] 
    public HttpPostedFileBase[] files { get; set; } 

} 

然後，編輯視圖這個（使上傳你需要把多個=「多」在你的元素很多文件）：

@model Models.FileModel 

@using (Html.BeginForm("Create", "YourController", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    @Html.AntiForgeryToken() 

    <div class="form-horizontal"> 
     <hr /> 
     @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
     <div class="form-group"> 
      @Html.LabelFor(model => model.files, htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 
       @Html.TextBoxFor(model => model.files, "", new { @type = "file", @multiple = "multiple" }) 
       @Html.ValidationMessageFor(model => model.files, "", new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Upload" class="btn btn-primary" /> 
      </div> 
     </div> 

     </div> 
}