【发布时间】:2015-04-28 10:26:39
【问题描述】:
我在我的创建表单中使用了这个http://www.dropzonejs.com/ 当用户单击“单击此处添加文件”时,文件存储在 Files/TempFile 但是当用户在我的创建方法上单击提交时,我想将所有文件从文件/临时文件移动到从用户上传的文件/票证文件,或者如果用户单击取消以从文件/临时文件中删除所有文件。 问题是如果有多个用户尝试同时上传文件怎么办。如果其中一位用户单击取消或提交如何知道要移动或删除哪些文件。
创建视图
@{
ViewBag.Title = "Create";
}
@using (Html.BeginForm("Create", "Ticket", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Ticket</legend>
<div class="editor-label">
@Html.LabelFor(model => model.idTicket)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.idTicket)
@Html.ValidationMessageFor(model => model.idTicket)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.idProject, "Project")
</div>
<div class="editor-field">
@Html.DropDownList("idProject", String.Empty)
@Html.ValidationMessageFor(model => model.idProject)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.tickettDescription)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.tickettDescription)
@Html.ValidationMessageFor(model => model.tickettDescription)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.assignment, "User")
</div>
<div class="editor-field">
@Html.DropDownList("assignment")
@Html.ValidationMessageFor(model => model.assignment)
</div>
<div class="jumbotron">
<div class="dropzone" id="dropzoneForm" style="width: 50px; background: none; border: none;">
<div class="fallback">
<input type="file" id="fileInput" name="files" multiple="multiple" >
<input type="submit" id="submit" value="Upload" />
</div>
</div>
</div>
<div class="clear-fix"></div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript">
//File Upload response from the server
Dropzone.options.dropzoneForm = {
init: function () {
this.on("maxfilesexceeded", function (data) {
$.ajax({
url: '@Url.Action("SaveUploadedFile", "File", new { id=1})',
})
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.
$.ajax({
type: "POST",
url: '@Url.Action("RemoveFile","File")',
contentType: "application/json; charset=utf-8",
data: "{name:" + JSON.stringify(file.name) + "}",
dataType: "json",
success: function () { _this.removeFile(file); }
});
})
// Add the button to the file preview element.
file.previewElement.appendChild(removeButton);
});
}
};
</script>
保存方法
public ActionResult SaveUploadedFile()
{
bool isSavedSuccessfully = true;
string fName = "";
try
{
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)
{
string path = Server.MapPath("~/Files/TempFile/") + file.FileName;
file.SaveAs(path);
}
}
}
catch (Exception ex)
{
isSavedSuccessfully = false;
}
if (isSavedSuccessfully)
{
return Json(new { Message = fName });
}
else
{
return Json(new { Message = "Error in saving file" });
}
}
我尝试不存储到 TempFile,当我单击创建以获取所有文件时
foreach (string fileName in Request.Files)
但 Request.Files 始终为空。
【问题讨论】:
标签: javascript jquery asp.net-mvc dropzone.js