如何实现在MVC和jquery中为FileUploading附加更多文件

在Yahoo的post中，当附加文件时，按下它时会出现一个“附加更多文件”按钮，它将成为插入文件的一个字段。 这是代码：

 Attach more files  

我该如何实现MVC？

Answer 1

为了使用文件上传控件上传多个文件，我使用简单易用的JQuery Multifile插件。 查看此链接JQuery Multiple File Upload

只是包含了这个库和JQuery及其语法就好

Answer 2

1. 创建一个允许您上传文件的Controller和Action

2. 找到一个实现上传多个文件的客户端插件。 我发现工作得很好的一个是Kendo UI的上传插件

如果你使用Kendo UI，这应该可以让你开始：

• http://docs.kendoui.c​​om/getting-started/using-kendo-with/aspnet-mvc/helpers/upload/overview

控制器：

  [HttpPost] public ActionResult Save(HttpPostedFileBase[] files) { // The Name of the Upload component is "attachments" foreach (var file in files) { //Do Something } // Return an empty string to signify success return Content(""); } 

视图

 
  ...  

Answer 3

这几乎与https://stackoverflow.com/questions/14575787/相同。 插件支持多文件上传。 如果需要更多细节，请告诉我。

Answer 4

你可以使用许多文件上传器，如

这个

并且您可以使用此代码上传此代码是客户端：

首先，如果需要，您可以进行一些validation。 例如，在文件的onChange事件中。

  $(':file').change(function(){ var file = this.files[0]; name = file.name; size = file.size; type = file.type; //your validation }); $(':button').click(function(){ var formData = new FormData($('form')[0]); $.ajax({ url: 'url', //server script to process data type: 'POST', xhr: function() { // custom xhr myXhr = $.ajaxSettings.xhr(); if(myXhr.upload){ // check if upload property exists myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload } return myXhr; }, //Ajax events beforeSend: beforeSendHandler, success: completeHandler, error: errorHandler, // Form data data: formData, //Options to tell JQuery not to process data or worry about content-type cache: false, contentType: false, processData: false }); }); function progressHandlingFunction(e){ if(e.lengthComputable){ $('progress').attr({value:e.loaded,max:e.total}); } } 

这是你的控制者

  [HttpPost] public ActionResult Save(HttpPostedFileBase[] files) { // The Name of the Upload component is "attachments" foreach (var file in files) { //Do Something } // Return an empty string to signify success return Content(""); } 

所以如果你不想使用ajax使用这个

 @{ ViewBag.Title = "Upload"; } 
 Upload
 @using (Html.BeginForm(actionName: "Upload", controllerName: "User", method: FormMethod.Post, htmlAttributes: new { enctype = "multipart/form-data" })) { Upload a photo:   } 

Answer 5

经过许多不成功的解决方案，我得到了它

 http://lbrtdotnet.wordpress.com/2011/09/02/asp-net-mvc-multiple-file-uploads-using-uploadify-and-jqueryui-progressbar/ 

单击此有用链接

  I kept the Url Values in a session public JsonResult Upload(HttpPostedFileBase file) { if (Session["myAL"] == null) { al = new ArrayList(); } else al = (ArrayList)Session["myAL"]; var uploadFile = file; if (uploadFile != null && uploadFile.ContentLength > 0) { string filePath = Path.Combine(HttpContext.Server.MapPath("~/Content/Uploads"), Path.GetFileName(uploadFile.FileName)); al.Add(filePath); Session["myAL"] = al; uploadFile.SaveAs(filePath); } var percentage = default(float); if (_totalCount > 0) { _uploadCount += 1; percentage = (_uploadCount / _totalCount) * 100; } return Json(new { Percentage = percentage }); } 

然后在我的Post Create Action中检索它们

 public ActionResult MultimediaCreate(MultimediaModel newMultimedia) { if (ModelState.IsValid) { db.submitMultimedia(newMultimedia); al = (ArrayList)Session["myAL"]; foreach(string am in al) { MarjaaEntities me = new MarjaaEntities(); MultimediaFile file = new MultimediaFile(); file.MultmediaId = newMultimedia.id; file.MultimediaFileUrl = am; me.MultimediaFiles.AddObject(file); me.SaveChanges(); Session.Remove("myAL"); } return RedirectToAction("MultimediaIndex"); } return View(); }