使用c#controller进行dropzone附加表单输入

时间:2016-04-20 18:39:48

标签: c# jquery

我使用dropzone js上传文件。我想传递一些输入字段,如标题和描述。我使用了发送活动,但不知道如何在我的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);
    }

感谢。

1 个答案:

答案 0 :(得分:0)

简化为:

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

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

{{1}}

......或者可能会将“Title”作为控制器中的参数。