用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上传多个文件

回答

相关问题