He empezado a buscar en dropzone.js Es posible de alguna manera modificar la previewTemplate área para agregar información adicional acerca de los archivos subidos y, a continuación, enviar el formulario a un mvc método?

Por simplicidad, quiero añadir dos campos DocumentTypeID y ExpirationDate para cada archivo que un usuario quiere subir

@model MyProject.Model.Document

@using (Html.BeginForm("Create", "Document", FormMethod.Post, new { enctype = "multipart/form-data", @class = "dropzone", @id = "my-awesome-dropzone" }))

<div class="row-fluid">
    <fieldset class="span6">  
        <div class="editor-label">
            @Html.LabelFor(model => model.DocumentTypeID, "DocumentType")
        <div class="editor-field">
            @Html.DropDownList("DocumentTypeID", String.Empty)
            @Html.ValidationMessageFor(model => model.DocumentTypeID)
        <div class="editor-label">
            @Html.LabelFor(model => model.ExpirationDate)
        <div class="editor-field">
            @Html.EditorFor(model => model.ExpirationDate)
            @Html.ValidationMessageFor(model => model.ExpirationDate)
    <div class="span6">   <div class="dropzone-previews"></div> </div>

Aquí es el método de controlador que por ahora debe aceptar un archivo a la vez

    public ActionResult Create(Document document, HttpPostedFileBase file)
        if (ModelState.IsValid && file != null)

            document.FilePath = ProcessDocumentUpload(Request.Files[0], document.DocumentID);

            return "";//? //not sure what to return yet


Ahora la función Js para dropzone

    <script type="text/javascript">
$(function () {
//"myAwesomeDropzone" is the camelized version of the HTML element's ID
Dropzone.options.myAwesomeDropzone = {
autoDiscover: false,
paramName: "file", //The name that will be used to transfer the file
maxFilesize: 5, //MB
maxFiles: 1, //for now upload one at a time
//I started looking at the template and added two elements as an experiment.
previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n <input type=\"text\" data-dz-doc-expiration-date class=\"dz-doc-input\" />\n <select class=\"dz-doc-input\" data-dz-doc-document-type-id  ></select>\n   <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span>✔</span></div>\n  <div class=\"dz-error-mark\"><span>✘</span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",
//dictDefaultMessage: "Drop files here to upload or click",
//The configuration that allows the whole form to be submitted on button click
autoProcessQueue: false,
uploadMultiple: false,
parallelUploads: 1,
addRemoveLinks: true,
previewsContainer: ".dropzone-previews", //show a preview in another place
//The setting up of the dropzone
init: function () {
var myDropzone = this;
//First change the button to actually tell Dropzone to process the queue.
$("input[type=submit]").on("click", function (e) {
//Make sure that the form isn't actually being sent.
//Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
//of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function () {
//Gets triggered when the form is actually being sent.
//Hide the success button or the complete form.
this.on("successmultiple", function (files, response) {
//Gets triggered when the files have successfully been sent.
//Redirect user or notify of success.
this.on("errormultiple", function (files, response) {
//Gets triggered when there was an error sending the files.
//Maybe show form again, and notify user of error
accept: function (file, done) {
//maybe do something here for showing a dialog or adding the fields to the preview?

Gracias por mirar!

  • Gracias por la Idea de Cómo crear Personalizados de vista previa 🙂
InformationsquelleAutor kiev | 2013-09-18

1 Comentario

  1. 1

    han tratado de controlar el evento ‘enviar’?

    $dropzone.on('sending', function (file, xhr, formData) {
    formData.append('id', $id);

    Controlador MVC

    public JsonResult UploadImage(string id)
    for (int i = 0; i < Request.Files.Count; i++)
    HttpPostedFileBase file = Request.Files[i];
    return Json(true, JsonRequestBehavior.DenyGet);

    He estado usando también MVC 4 y ha funcionado bien.

Dejar respuesta

Please enter your comment!
Please enter your name here