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);
}
谢谢。
简化:
<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"]
或者在控制器中使用"标题"作为参数。