用JQuery和MVC4上傳多個文件

我試圖上傳多個文件以及普通表單數據。這件事我以前在PHP中實現，現在我正在使用C＃中的ASP.NET MVC4來完成此操作。我有一個HTML表單用JQuery和MVC4上傳多個文件

<form action="/controller/actionane" name="applicationform" class="upload-form" method="post" onsubmit="return false;" enctype="multipart/form-data" id="userform"> 
     <input class="form-control" type="file" class="upload-file" data-max-size="12582912" multiple="multiple" name="attachment[]" value="documents"> 
     <input class="btn btn-success" type="submit" name="submit" onclick="formSubmit()" /> 
    </form>

我的JavaScript代碼使用jQuery-1.11.1看起來是這樣的：

function formSubmit() { 
    var form = $("form[name='applicationform']"); 
    var data = new FormData(form[0]); 
    $.ajax(
     { 
      method: "POST", 
      url: form.attr("action"), 
      processData: false, // Don't process the files 
      contentType: false, cache: false, async: false, 
      data: data, 
      success: function (data) { 
       alert(data); 
      } 
     }); 
    }

和我的控制器看起來像這樣

[HttpPost] 
public JsonResult submitApplication(HttpPostedFileBase[] attachment) 
{ 
       string fil= ""; 
       foreach (HttpPostedFileBase file in attachment) 
       { 
        /*Geting the file name*/ 
        string filename = System.IO.Path.GetFileName(file.FileName); 
        fil += filename; 
        /*Saving the file in server folder*/ 
        file.SaveAs(Server.MapPath("~/Images/" + filename)); 
        string filepathtosave = "Images/" + filename; 
        /*HERE WILL BE YOUR CODE TO SAVE THE FILE DETAIL IN DATA BASE*/ 
       } 

        return this.Json(fil,JsonRequestBehavior.AllowGet); 
}

但這不是將文件傳遞給參數拋出對象引用null異常應該怎樣做才能使其運行？

來源

2015-04-22 Asim Khan

什麼happend如果你嘗試$（「form [name ='applicati onform']「）[0]？在consle中？ – clement

分享您的HTML表單... – Knelis

它得到的jquery格式的表單元素 –

你可以試試這個：

客戶端代碼：

<html> 
<head> 
<title>Upload Example</title> 
<script src="~/Scripts/jquery-2.1.0.intellisense.js"></script> 
<script src="~/Scripts/jquery-2.1.0.js"></script> 
<script src="~/Scripts/jquery-2.1.0.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#Upload").click(function() { 
     var formData = new FormData(); 
     var totalFiles = document.getElementById("FileUpload").files.length; 
     for (var i = 0; i < totalFiles; i++) 
     { 
      var file = document.getElementById("FileUpload").files[i]; 

      formData.append("FileUpload", file); 
     } 
     $.ajax({ 
      type: "POST", 
      url: '/Home/Upload', 
      data: formData, 
      dataType: 'json', 
      contentType: false, 
      processData: false, 
      success: function (response) { 
       alert('succes!!'); 
      }, 
      error: function (error) { 
       alert("Failed"); 
      } 
     }); 
    }); 
}); 

</script> 
</head> 
<body> 
<input type="file" id="FileUpload" multiple /> 
<input type="button" id="Upload" value="Upload" /> 
</body> 
</html>

服務器端代碼：

服務器端....

public class HomeController : Controller 
{ 
    [HttpPost] 
    public void Upload() 
    { 
    for(int i = 0 ; i < Request.Files.Count ; i++) 
    { 
     var file = Request.Files[i]; 
     var fileName = Path.GetFileName(file.FileName); 
     var path = Path.Combine(Server.MapPath("~/[Your_Folder_Name]/") , fileName); 

     file.SaveAs(path);  
    } 
    } 
}

來源

2015-04-22 10:04:44

用JQuery和MVC4上傳多個文件

回答

相關問題