问题
I read some articles that is not possible to save files using Ajax.BeginForm.
I have a form in MVC5 that uses Ajax.BeginForm so the user has a nice responsive app without page refresh.
Now, the requirement is to add 4 fields that will hold files (file upload).
Also read that maybe with jquery.form.js this is possible.
So my questions are about other approach is this make any sense:
- The form keep the
Ajax.BeginForm - The user enters data into the form.
- When user needs to load a file into the form, then I was thinking on uploading that file to server on the fly and store there temporarily.
- When the form is saved, on server side I can get temp files and then save them.
Does this make any sense? Appreciate any advice from people already facing this situation.
回答1:
Please check below code for save separate Form Data and File Upload :
View with Ajax.BeginForm
@using (Ajax.BeginForm("", "", new AjaxOptions
{
HttpMethod = "POST",
}, new { @id = "UploadFileForm", @class = "form-horizontal" }))
{
<div class="col-sm-3">
<label>Browse</label>
<input type="file" id="file" name="file" />
<p class="help-block">Supported format .doc,.docx,.pdf</p>
</div>
<div class="col-xs-12">
<button type="button" value="Add" id="Addbtn" class="btn btn-primary">
<i class="fa fa-plus-square"></i> Add
</button>
</div>
}File Upload Button Click Event :
$("#Addbtn").click(function () {
// --- code for upload resume
var formdata = new FormData();
var getfile = document.getElementById('file');
for (i = 0; i < getfile.files.length ; i++) {
formdata.append(getfile.files[i].name, getfile.files[i]);
}
function isvalidFileFormat() {
if (getfile.files.length > 0 ) {
var extention = $('#file').val().split('.');
var data;
$.each(extention, function (index, value) {
if (index == 1) {
data = value;
}
});
if (data == "pdf" || data == "docx" || data == "doc") {
return "";
}
else {
return "<p>Please choose .pdf, .docx, .doc file only." + "</p>\n";
}
}
else
return "";
}
}
if (summary) { CustomAlert(summary); return false; } else {
var TestModel = {
"Id": $("#hdnId").val()
};
$.ajax(
{
//Save Main Form Data
url: '/TestController/TestAction/',
type: "Post",
async: false,
dataType: "json",
data: JSON.stringify(TestModel),
contentType: "application/json;charset=utf-8",
success: function (result) {
// After saving main data you can save this file for same user
formdata.append("Userid", result.id);
$.ajax({
url: '/TestController/Fileupload',
data: formdata,
contentType: false,
processData: false,
async: false,
type: 'POST',
success: function (data) {
$("#YourDivName").html(data);
}
});
$("#file").val(null);
}
});
return true;
}
});Here is the code for file upload
/// <summary>
///File Upload
/// </summary>
/// <param name="Userid"></param>
/// <returns></returns>
[HttpPost]
public ActionResult Fileupload(int Userid = 0)
{
string path = string.Empty;
string filename = string.Empty;
string fileExtention = string.Empty;
string withoutEXT = string.Empty;
string ResumeFilePath = string.Empty;
string ChangeFileName = string.Empty;
bool uploadStatus = false;
if (Request.Files != null && Request.Files.Count > 0)
{
for (int i = 0; i < Request.Files.Count; i++)
{
HttpPostedFileBase file = Request.Files[i];
if (file.ContentType == "application/pdf" || file.ContentType == "text/rtf" || file.ContentType == "application/doc"
|| file.ContentType == "application/vnd.openxmlformats-officedocument.wordprocessingml.document")
{
filename = Path.GetFileNameWithoutExtension(file.FileName);
fileExtention = Path.GetExtension(file.FileName);
withoutEXT = fileExtention.Replace(".", "");
ChangeFileName = filename + "_" + locationid + fileExtention;
var ifExistPath = "/Uploads/Files/" + ChangeFileName;
var FileVirtualPath = System.IO.Path.Combine(Server.MapPath("/Uploads/Files/"), ChangeFileName);
path = Path.Combine(Server.MapPath("~/Uploads/Files/"), ChangeFileName);
//delete file
if (System.IO.File.Exists(path))
{
System.IO.File.Delete(path);
}
if (ifExistPath != FileVirtualPath)
{
file.SaveAs(path);
uploadStatus = true;
}
else
{
}
}
else
{
ModelState.AddModelError("", "Please upload a PDF or Doc or rtf File");
// return View("", model);
}
if (uploadStatus && path != string.Empty)
{
ResumeFilePath = "/Uploads/Files/";
//Add code for save this file in database here
}
}
}
return PartialView("Test", objMaster);
}Hope this will help you !!
回答2:
You cannot use the MVC Ajax helper with files upload.
Instead, you can use the jquery form plugin, on a normal Html.BeginForm().
Example:
<form id="myForm" url="/Home/Upload" method="post" enctype="multipart/form-data">
<label>File</label>
<input name="file" type="file" />
</form>
<script>
function bindAjaxForm(selector, onComplete, beforeSerialize) {
var form = $(selector);
$.validator.unobtrusive.parse(selector);
form.data("validator").settings.submitHandler = function (frm) {
$(frm).ajaxSubmit({
beforeSerialize: function ($form, options) {
if (typeof (beforeSerialize) === "function") {
beforeSerialize($form, options);
}
},
complete: function (response, statusText) {
if (typeof onComplete === "function") {
onComplete(response, statusText);
}
}
});
}
};
bindAjaxForm("#myForm", function(data, status) {
alert("complete");
console.log(arguments);
});
</script>
You use the onComplete and beforeSerialize callbacks to handle the response.
onComplete is called after the AJAX is done, and if you console.log its arguments, you will see it contains the AJAX response (json / html).
Try something like this:
bindAjaxForm("#myForm", function(data, status) {
$("#container").html(data);
});
回答3:
Add this
$("body").on("submit", "#frmAddProduct", function (e) {
var form = e.target;
if (form.dataset.ajax) {
e.preventDefault();
e.stopImmediatePropagation();
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (form.dataset.ajaxUpdate) {
var updateTarget = document.querySelector(form.dataset.ajaxUpdate);
}
}
};
if ($("#frmAddProduct").valid()) { xhr.send(new FormData(form)); }
} return true;
});
来源：https://stackoverflow.com/questions/40644898/mvc5-ajax-beginform-upload-form-with-files