如何使用View Models在ASP.NET MVC 5中使用jQuery.filer插件上传多个文件 [英] How to upload multiple files with jQuery.filer plugin in ASP.NET MVC 5 using View Models
问题描述
我在 FileUpload上使用 jQuery.filer
控制在 MVC5
项目中,我想从查看
到控制器
使用 ViewModel
。通常我使用了一些方法,如 AJAX
和 Request.Files [n]
但是我想用 ViewModel
,因为我已经将它传递给Controller。我在上传了一个很好的例子MVC与视图模型由 @ChrisPratt
,但他不谈论多个上传,并有一些与文件上传控制相关的问题。 MVC5
。所以,你能告诉我为了从 View
到 Controller
传递多个文件,在 foreach
循环中获取这些多个文件。
查看:
@model ExperimentViewModel
< input type =filename =FileUploadid = filer_inputmultiple =multiple>
<! - 或 - >
@ Html.TextBoxFor(m => m.FileUpload,new {type =file,id =filer_input})
< script> filer({
limit:null,
maxSize:null,
extensions:null,$ b $ uploadFile:{
url://发送请求的URL {String}
data://发送给服务器的数据{Object}
类型:'POST',//请求的类型{String }
enctype:'multipart / form-data',//请求enctype {String}
}
)};
函数create(event){
event.preventDefault();
var formdata = new FormData($('#frmCreate')。get(0));
$ .ajax({
type:POST,
url:'@ Url.Action(Create,Experiment)',
cache :false,
dataType:json,
data:formdata,
processData:false,
contentType:false
});
};
< script>
ViewModel:
public class ExperimentViewModel
{
//为简洁省略代码
[DataType(DataType.Upload)]
public HttpPostedFileBase FileUpload {get;组; }
}
任何帮助将不胜感激。 ========================= ====== 已解决 ================================ 以下是由 @StephenMuecke 提供的解决方案。非常感谢他的巨大帮助... 查看: b I am using jQuery.filer on a View: Any help would be appreciated. =============================== S O L V E D ================================ Here is the solution by @StephenMuecke. Many thanks for his huge help... View:
这篇关于如何使用View Models在ASP.NET MVC 5中使用jQuery.filer插件上传多个文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
控制器:(bind(Exclude = null)] ExperimentViewModel model)
$ pre $ public $ J $ $ b {
if(ModelState.IsValid)
{
//我不知道如何检索files.Count(),IEnumerable< HttpPostedFileBase>
var files = model.FileUpload;
if(files!= null& amp; files.Count()> 0)
{
// ???
$ b
@model ExperimentViewModel
//更改1
@ Html.TextBoxFor(m => m.FileUpload,new {type = file,multiple =multiple})
< script>
函数create(event){
event.preventDefault();
//更改2:因为jquery.filer将[]添加到Name参数中!
$('#FileUpload')。attr('name','FileUpload');
var formdata = new FormData($('#frmCreate')。get(0));
$ .ajax({
type:POST,
url:'@ Url.Action(Create,Experiment)',
cache :false,
dataType:json,
data:formdata,
processData:false,
contentType:false
});
};
$ b $('#FileUpload')。filer({
//为了简洁省略代码
//更改3:注释掉uploadFile部分
// uploadFile:{...}
});
< script>
ViewModel:
public class ExperimentViewModel
{
//为简洁省略代码
//更改4
[DataType(DataType.Upload)]
public IEnumerable< HttpPostedFileBase> FileUpload {get;组; }
}
控制器:
$ b
public JsonResult Insert(ExperimentViewModel模型)// Change 5
{
if(ModelState.IsValid)
{
// ...
}
}
FileUpload
control in an MVC5
project and I want to post multiple files from View
to Controller
using ViewModel
. Normally I have used some approach as AJAX
and Request.Files[n]
but I want to use ViewModel
as I already pass it to the Controller. I followed a good example File Uploads in ASP.NET MVC with View Models by @ChrisPratt
, but he does not talk about multiple uploads and there are some problems related to file upload control in MVC5
. So, could you please inform me what changes should be made in order to pass multiple file upload from View
to Controller
and get these multiple files in a foreach
loop.@model ExperimentViewModel
<input type="file" name="FileUpload" id="filer_input" multiple="multiple" >
<!-- or -->
@Html.TextBoxFor(m => m.FileUpload, new { type = "file" , id="filer_input"})
<script>
$('#filer_input').filer({
limit: null,
maxSize: null,
extensions: null,
uploadFile: {
url: //URL to which the request is sent {String}
data: //Data to be sent to the server {Object}
type: 'POST', //The type of request {String}
enctype: 'multipart/form-data', //Request enctype {String}
}
)};
function create(event) {
event.preventDefault();
var formdata = new FormData($('#frmCreate').get(0));
$.ajax({
type: "POST",
url: '@Url.Action("Create", "Experiment")',
cache: false,
dataType: "json",
data: formdata,
processData: false,
contentType: false
});
};
<script>
ViewModel:public class ExperimentViewModel
{
//code omitted for brevity
[DataType(DataType.Upload)]
public HttpPostedFileBase FileUpload { get; set; }
}
Controller:public JsonResult Insert([Bind(Exclude = null)] ExperimentViewModel model)
{
if (ModelState.IsValid)
{
//I have no idea how to retrieve the files.Count(), files in an IEnumerable<HttpPostedFileBase>
var files = model.FileUpload;
if(files != null && files.Count() > 0)
{
//???
}
}
}
@model ExperimentViewModel
//Change 1
@Html.TextBoxFor(m => m.FileUpload, new { type = "file", multiple = "multiple" })
<script>
function create(event) {
event.preventDefault();
//Change 2 : Because jquery.filer adds "[]" to the Name parameter!!!
$('#FileUpload').attr('name', 'FileUpload');
var formdata = new FormData($('#frmCreate').get(0));
$.ajax({
type: "POST",
url: '@Url.Action("Create", "Experiment")',
cache: false,
dataType: "json",
data: formdata,
processData: false,
contentType: false
});
};
$('#FileUpload').filer({
//code omitted for brevity
//Change 3: Comment out uploadFile section
//uploadFile: { ... }
});
<script>
ViewModel:public class ExperimentViewModel
{
//code omitted for brevity
//Change 4
[DataType(DataType.Upload)]
public IEnumerable<HttpPostedFileBase> FileUpload { get; set; }
}
Controller:public JsonResult Insert(ExperimentViewModel model) //Change 5
{
if (ModelState.IsValid)
{
//...
}
}