tutorial net ecommerce asp asp.net-mvc asp.net-mvc-4 file-upload image-uploading

asp.net-mvc - net - nopcommerce github



Asp.net MVC: subir archivos de imágenes múltiples? (4)

¿Hay un buen ejemplo de cómo cargar varios archivos de imagen en asp.net mvc? Sé que podemos usar HttpPostedFileBase para cargar un archivo. ¿Hay una manera de cargar varios archivos haciendo clic en un botón?

Utilicé la carga de archivos en ajaxtoolbox en el formulario web antes y me gusta cómo funciona. ¿Hay alguna forma similar en MVC? o, ¿existe un control que pueda hacer esto bien? el control libre es mejor, pero está bien aunque cuesta unos $.

Gracias


Algunos de los bits básicos requeridos para subir archivos

Palabra clave de aviso: múltiple en el elemento de entrada Y multiparte en el elemento de formulario

Lado HTML

@using (Html.BeginForm("MyUpload", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" })) { <input type="file" name="myFiles" multiple /> <button class="btn btn-default">Upload</button> }

Controlador

[HttpPost] public ActionResult MyUpload(IEnumerable<HttpPostedFileBase> myFiles) { foreach (var file in myFiles) { if (file != null && file.ContentLength > 0) { //handle files; } } return View(); }



Podría implementar una acción con el verbo http POST para recibir una colección de HttpPostedFileBase y guardar todos los archivos, para muestra:

[HttpPost] public ActionResult Upload(IEnumerable<HttpPostedFileBase> files) { foreach (var file in files) { file.SaveAs(Server.MapPath("~/Update/" + file.FileName)); } return View(); }

Alternativamente, puedes leer los Request.Files y hacer el mismo trabajo,

[HttpPost] public ActionResult Upload() { foreach (var file in Request.Files) { file.SaveAs(Server.MapPath("~/Update/" + file.FileName)); } return View(); }

Ver también


Usa este plugin jQuery

solo incluye los archivos plugin js, crea la etiqueta:

<input type=''file'' multiple id=''fileUpload'' name="files[]" data-url="@Url.Action("Upload","Home")" />

(Excepto IE9 no permite seleccionar varios archivos en el cuadro de diálogo de selección)

Añadir un poco de JavaScript:

$(function () { $(''#fileUpload'').fileupload({ dataType: ''json'', done: function (e, data) { $.each(data.result.files, function (index, file) { $(''<p/>'').text(file.name).appendTo(document.body); }); } }); });

En la acción del controlador solo marque Request.Files y haga lo que quiera. Aquí hay una buena documentation

[HttpPost] public JsonResult Upload() { foreach (var file in Request.Files) { if(file.ContentLength > 0) { file.SaveAs(Server.MapPath("~/Upload/" + file.FileName)); } } return Json(new { result = true }); }