如何在Kendo Upload中将所选文件作为ajax请求中的参数传递 [英] How to pass selected files in Kendo Upload as parameter in ajax request
问题描述
经过大量的努力，我提出了这个问题.我在页面上使用Kendo Upload.能够在页面具有Html.BeginForm的情况下以异步模式发布所选文件.但是当我使用ajax请求将数据发送到控制器时，我无法以 HttpPostedFileBase 的形式发送文件详细信息.
After much of struggle im posing this question. Im using a Kendo Upload on a page. Am able to post the selected files on the asyn mode with whe the page has Html.BeginForm. But I'm not able to send file details as HttpPostedFileBase when I use ajax request to send data to the controller.
以下是我的html
<form class="form-horizontal" role="form">
<div class="form-group">
@Html.Label("Complaint Name", new { @class = "col-sm-3 control-label" })
<div class="col-sm-4">
@Html.TextBoxFor(
m => m.ComplaintName,
new
{
@TabIndex = "1",
@class = "form-control input-sm",
disabled = true
})
</div>
</div>
<div class="form-group">
@Html.Label("Complaint Details", new { @class = "col-sm-3 control-label" })
<div class="col-sm-4">
@Html.TextBoxFor(
m => m.ComplaintDetails,
new
{
@TabIndex = "2",
@class = "form-control input-sm",
disabled = true
})
</div>
</div>
<div class="form-group">
@Html.Label("Choose files to upload", new { @class = "col-sm-3 control-label" })
<div class="col-sm-9 nopaddingforTextArea">
<input name="files" id="files" type="file" />
</div>
</div>
<div class="form-group">
<div>
<input id="btnSubmit" class="btn btn-primary pull-right" type="button" />
</div>
</div>
</form>
以下是我的行动
public ActionResult SaveComplaintDetails(string complaintName, string complaintDetails, IEnumerable<HttpPostedFileBase> files)
{
}
以下是我的js
$("#files").kendoUpload({
async: {
saveUrl: '@Url.Action("EsuperfundCommentsBind", ClientInboxConstants.NewQuery)',
autoUpload: false
},
multiple: true
});
$("#btnSubmit").click(function () {
//Ajax call from the server side
$.ajax({
//The Url action is for the Method FilterTable and the Controller PensionApplicationList
url: '@Url.Action("SaveComplaintDetails", "Complaints")',
//The text from the drop down and the corresponding flag are passed.
//Flag represents the Index of the value in the dropdown
data: {
complaintName: document.getElementById("ComplaintName").value,
complaintDetails: document.getElementById("ComplaintDetails").value,
files: //What to pass here??
},
contentType: "application/json; charset=utf-8",
//Json data
datatype: 'json',
//Specify if the method is GET or POST
type: 'GET',
//Error function gets called if there is an error in the ajax request
error: function () {
},
//Gets called on success of the Ajax Call
success: function (data) {
}
});
});
我的问题是如何在ajax中将Kendo Upload中的选定文件作为参数传递? 在这方面的任何帮助将不胜感激.
My question is how to pass the selected files in Kendo Upload in ajax as a parameter? Any help in this aspect would be really appreciated.
推荐答案
如果视图基于模型，并且已在<form>标记内生成控件，则可以使用以下命令将模型序列化为FormData:
If your view is based on a model and you have generated the controls inside <form> tags, then you can serialize the model to FormData using:
<script>
var formdata = new FormData($('form').get(0));
</script>
这还将包括使用<input type="file" name="myImage" .../>生成的所有文件，并使用以下命令将其发布回去:
This will also include any files generated with: <input type="file" name="myImage" .../> and post it back using:
<script>
$.ajax({
url: '@Url.Action("YourActionName", "YourControllerName")',
type: 'POST',
data: formdata,
processData: false,
contentType: false,
});
</script>
并在您的控制器中:
[HttpPost]
public ActionResult YourActionName(YourModelType model)
{
}
或(如果您的模型不包含HttpPostedFileBase的属性)
or (if your model does not include a property for HttpPostedFileBase)
[HttpPost]
public ActionResult YourActionName(YourModelType model,
HttpPostedFileBase myImage)
{
}
如果您要添加表格中未包含的其他信息，则可以使用
If you want to add additional information that is not in the form, then you can append it using
<script>
formdata.append('someProperty', 'SomeValue');
</script>
示例用法:
视图:
@using (Html.BeginForm("Create", "Issue", FormMethod.Post,
new { id = "frmCreate", enctype = "multipart/form-data" }))
{
@Html.LabelFor(m => m.FileAttachments, new { @class = "editor-label" })
@(Html.Kendo().Upload()
.HtmlAttributes(new { @class = "editor-field" })
.Name("files")
)
}
<script>
$(function () {
$('form').submit(function (event) {
event.preventDefault();
var formdata = new FormData($('#frmCreate').get(0));
$.ajax({
type: "POST",
url: '@Url.Action("Create", "Issue")',
data: formdata,
dataType: "json",
processData: false,
contentType: false,
success: function (response) {
//code omitted for brevity
}
});
});
});
</script>
控制器:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Exclude = null)] Model viewModel, IEnumerable<HttpPostedFileBase> files)
{
//code omitted for brevity
return Json(new { success = false, message = "Max. file size 10MB" }, JsonRequestBehavior.AllowGet);
}
希望这对您有帮助...
Hope this helps...
这篇关于如何在Kendo Upload中将所选文件作为ajax请求中的参数传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
