dropzone使用c#控制器进行附加表单输入

本文关键字:表单 输入 使用 控制器 dropzone | 更新日期: 2024-10-20 06:35:39

我正在使用dropzone js上传文件。我想传递一些输入字段,如标题和描述。我使用了sending事件,但不知道如何在C#控制器中捕获数据。请帮忙。

这是我的js代码。

<div id="my-awesome-dropzone" class="dropzone">
<div class="dropzone-previews"></div> <!-- this is were the previews should be shown. -->
<!-- Now setup your input fields -->
<input type="text" name="Title" id="Title" placeholder="Title" />
<input type="text" name="Description" id="Description"/>
<button type="submit">Submit data and files!</button>
</div>
@section scripts
{
<script type="text/javascript">
    sabio.page.startUp = function () {
        sabio.page.initializeDropzone();
    };
    sabio.page.initializeDropzone = function () {
        Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element
            // The configuration we've talked about above
            autoProcessQueue: false,
            uploadMultiple: false,
            parallelUploads: 1,
            maxFiles: 1,
            maxFilesize: 5,
            url: "/api/MediaUploader/upload",
            // The setting up of the dropzone
            init: function () {
                var myDropzone = this;
                // First change the button to actually tell Dropzone to process the queue.
                this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
                    // Make sure that the form isn't actually being sent.
                    e.preventDefault();
                    e.stopPropagation();
                    myDropzone.processQueue();
                });
                this.on("sending", function (file, xhr, formData) {
                    // Will send the filesize along with the file as POST data.
                    formData.append("Title", $('#Title').val());
                    console.log("formdata is " + formData.Title)
                });
                // 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
                });
            }
        }
    };
</script>

}

这是我的C#控制器代码。

    [Route("upload")]
    public HttpResponseMessage Upload()
    {
        HttpResponseMessage result = null;
        var httpRequest = HttpContext.Current.Request;
        ItemResponse<int> response = new ItemResponse<int>();
        if (httpRequest.Files.Count > 0)
        {
            string filePath = null;
            string fileName = null;
            //string fileTitle = null;
            var docfiles = new List<string>();
            foreach (string file in httpRequest.Files)
            {
                var postedFile = httpRequest.Files[file];
                filePath = HttpContext.Current.Server.MapPath("~/Media/" + postedFile.FileName);
                fileName = postedFile.FileName;
                //fileTitle = postedFile.;
                postedFile.SaveAs(filePath);
                docfiles.Add(filePath);
                // upload to amazon S3
                FileUploadService uploadNow = new FileUploadService();
                uploadNow.uploadFiles(filePath, fileName);
                MediaRequestModel mediaModel = new MediaRequestModel();
                mediaModel.FileName = fileName.Substring(0, fileName.LastIndexOf("."));
                mediaModel.Path = "C15";
                mediaModel.MediaType = fileName.Substring(fileName.Length - 3);
                // insert into db.
                //MediaService.InsertMedia(mediaModel);
                response.Item = MediaService.InsertMedia(mediaModel);
            }
            result = Request.CreateResponse(HttpStatusCode.Created, docfiles);
        }
        else
        {
            result = Request.CreateResponse(HttpStatusCode.BadRequest);
        }
        return Request.CreateResponse(response);
    }

谢谢。

dropzone使用c#控制器进行附加表单输入

简化:

<script>
       Dropzone.options.mediaUploader= {
            init: function () {
                this.options.uploadMultiple = false;
                this.on("success", function (file, responseText) {
                     alert("Wheeeee!");
                });
            }
        };
</script>
<div id="dropzone">
    <form id="mediaUploader" action="/api/MediaUploader/upload" class="dropzone needsclick dz-clickable">
        <!-- inputs -->
        <input type="text" name="Title" id="Title" placeholder="Title" />
        <input type="text" name="Description" id="Description"/>
        <div class="dz-message needsclick">
            <h2>Drop file here or click to upload.</h2><br>
        </div>
    </form>
</div>

然后,您可能只需通过以下方式访问控制器中的值:

HttpContext.Current.Request.Form["Title"]

或者在控制器中使用"标题"作为参数。