将文本框字段添加到Dropzone.js中的每个文件

Question

我正在使用DropZone.js使用MVC上传多张图片。我需要为每个上载添加一个文本框，以便用户可以向图像输入其他信息或“标签”，以便以后可以被这些标签过滤。我的代码是：

Index.cshtml

@{
ViewBag.Title = "Home Page";
}

<div class="jumbotron">
<form action="~/Home/SaveUploadedFile" method="post" enctype="multipart/form-    data" class="dropzone" id="dropzoneForm">
    <div class="fallback">
        <input name="file" type="file" multiple />
        <input type="submit" value="Upload" />

    </div>
</form>

<style type="text/css">
.dz-max-files-reached {
    background-color: silver;
}
</style>
@section scripts{
<script type="text/javascript">

    //File Upload response from the server
    Dropzone.options.dropzoneForm = {
        maxFiles: 2,
        init: function () {
            this.on("maxfilesexceeded", function (data) {
                var res = eval('(' + data.xhr.responseText + ')');

            });
            this.on("addedfile", function (file) {

                // Create the remove button
                var removeButton = Dropzone.createElement("<button>Remove file</button>");

                // Capture the Dropzone instance as closure.
                var _this = this;

                // Listen to the click event
                removeButton.addEventListener("click", function (e) {
                    // Make sure the button click doesn't submit the form:
                    e.preventDefault();
                    e.stopPropagation();
                    // Remove the file preview.
                    _this.removeFile(file);
                    // If you want to the delete the file on the server as well,
                    // you can do the AJAX request here.
                });

                // Add the button to the file preview element.
                file.previewElement.appendChild(removeButton);
            });
        }
    };
</script>
}

DisplayImages.cshtml

@{
ViewBag.Title = "DisplayImages";
}

<h2>DisplayImages</h2>

<div class="jumbotron">
<form action="~/Home/SaveUploadedFile" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
    <div class="fallback">
        <input name="file" type="file" multiple />
        <input type="submit" value="Upload" />

    </div>
</form>

@section Scripts
{
<script type="text/javascript">
    Dropzone.options.dropzoneForm = {
        acceptedFiles: "image/*",
        init: function () {
            var thisDropzone = this;


            $.getJSON("/home/GetAttachments/").done(function (data) {
                if (data.Data != '') {

                    $.each(data.Data, function (index, item) {
                            //// Create the mock file:
                            var mockFile = {
                                name: item.AttachmentID,
                                size: 12345
                            };

                            // Call the default addedfile event handler
                            thisDropzone.emit("addedfile", mockFile);

                            // And optionally show the thumbnail of the file:
                            thisDropzone.emit("thumbnail", mockFile, item.Path);

                            // If you use the maxFiles option, make sure you adjust it to the
                            // correct amount:
                            //var existingFileCount = 1; // The number of files already uploaded
                            //myDropzone.options.maxFiles = myDropzone.options.maxFiles - existingFileCount;
                    });
                }

            });


        }
    };

</script>
}

和控制器：HomeController.cs

using DropZoneFileUpload.Models;

namespace DropZoneFileUpload.Controllers
{
public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    protected override void HandleUnknownAction(string actionName)
    {
        this.View(actionName).ExecuteResult(this.ControllerContext);
        //base.HandleUnknownAction(actionName);
    }


    public ActionResult SaveUploadedFile()
    {
        bool isSavedSuccessfully = true;
        string fName = "";
        foreach (string fileName in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[fileName];
            //Save file content goes here
            fName = file.FileName;
            if (file != null && file.ContentLength > 0)
            {

                var originalDirectory = new DirectoryInfo(string.Format("{0}Images\\WallImages", Server.MapPath(@"\")));

                string pathString = System.IO.Path.Combine(originalDirectory.ToString(), "imagepath");

                var fileName1 = Path.GetFileName(file.FileName);


                bool isExists = System.IO.Directory.Exists(pathString);

                if (!isExists)
                    System.IO.Directory.CreateDirectory(pathString);

                var path = string.Format("{0}\\{1}", pathString, file.FileName);
                file.SaveAs(path);

            }

        }

        if (isSavedSuccessfully)
        {
            return Json(new { Message = fName });
        }
        else
        {
            return Json(new { Message = "Error in saving file" });
        }
    }


    public ActionResult DisplayImages()
    {
        return View();
    }

    public ActionResult GetAttachments()
    {
        //Get the images list from repository
        var attachmentsList =  new List<AttachmentsModel>
        {
            new AttachmentsModel {AttachmentID = 1, FileName = "/images/wallimages/dropzonelayout.png", Path = "/images/wallimages/dropzonelayout.png"},
            new AttachmentsModel {AttachmentID = 1, FileName = "/images/wallimages/imageslider-3.png", Path = "/images/wallimages/imageslider-3.png"}
        }.ToList();

        return Json(new { Data = attachmentsList }, JsonRequestBehavior.AllowGet); 
    }
}
}

模型类：AttachmentsModel.cs

namespace DropZoneFileUpload.Models
{
public class AttachmentsModel
{
    public long AttachmentID { get; set; }
    public string FileName { get; set; }
    public string Path { get; set; }
}
}

如何在每个文件中添加文本框？我感谢任何人都可以提供的帮助。 谢谢