我是新的asp网络,我有一个图像列表,我想通过JavaScript发送到控制器。ASP NET MVC RAZOR上传多个图片FileList
我正在使用FileList,这里是一个例子。 .Create.cshtml
<div class="form-group">
@Html.LabelFor(model => model.description, "Escolha as Imagens", htmlAttributes: new { @class = "control-label col-md-2" })
<input id="files" type="file" name="files[]" />
<br>
<div id="preview"></div>
</div>
@section Scripts{
<script type="text/javascript">
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
//kiem tra co fai file anh
if (f.type.match('image.*')) {
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = [
'<img class="thumb" src="', e.target.result, '" title="', escape(theFile.name),
'"/><span class="remove_img_preview"></span>'
].join('');
document.getElementById('preview').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
$('#files').change(function(evt) {
handleFileSelect(evt);
});
$('#preview').on('click',
'.remove_img_preview',
function() {
$(this).parent('span').remove();
});
$('#btnSave').click(function() {
$.ajax({
url: '/Dishes/Create',
data: { files: files },
type: "POST",
cache: false,
datatype: "html",
success: function(data) {
console.log(data);
},
error: function(jqXhr, textStatus, errorThrown) {
//do your own thing
alert("fail");
}
});
});
</script>
}
</fieldset>
<div class="form-group">
<div class="footer text-center">
<button class="btn btn-fill btn-info" name="btnSave" id="btnSave">Inserir novo</button>
</div>
</div>
Controller.cs
public ActionResult Create()
{
ViewBag.idTypeDish = new SelectList(db.TypeDish, "idTypeDish", "name");
return View();
}
// POST: Dishes/Create
[HttpPost]
public ActionResult Create(IEnumerable<HttpPostedFileBase> files)
{
return View();
}
在控制器,文件总是空。 我正在使用该示例,http://jsfiddle.net/Lwczca6p/1/,我只是适应了我的项目。
你可能不需要这么做,但是如果你打算允许多个文件上传,那么你需要添加'multiple =“多个“输入到你的文件中(假设你使用的是html5 – Ortund
@Ortund Ya我知道你的意思,但是如果他选择了2张图片,那么他会选择另一张图片,会发生什么?我有一个FileList, t发送FileList到控制器? – kroz
@Outund我使用所有的代码,因为在上传到服务器之前,用户可以预览图像并删除它,如果他想要的话。 – kroz