当我选择图像时,它会预览它,当我选择更多图像时,它会在它们旁边预览,然后我点击上传图像提交按钮,它只会上传最后选择的图像,而不是第一个。
[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
{
try
{
/*Lopp for multiple files*/
foreach (var file in files)
{
/*Geting the file name*/
string filename = System.IO.Path.GetFileName(file.FileName);
/*Saving the file in server folder*/
file.SaveAs(Server.MapPath("~/Images/" + filename));
string filepathtosave = "Images/" + filename;
/*HERE WILL BE YOUR CODE TO SAVE THE FILE DETAIL IN DATA BASE*/
}
ViewBag.Message = "File Uploaded successfully.";
}
catch
{
ViewBag.Message = "Error while uploading the files.";
}
return View();
}
<script>
var inputLocalFont = document.getElementById("image-input");
inputLocalFont.addEventListener("change", previewImages, false);
function previewImages() {
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for (var i = 0; i < fileList.length; i++) {
var objectUrl = anyWindow.createObjectURL(fileList[i]);
$('.preview-area').append('<img src="' + objectUrl + '" style="height:150px; width:150px; margin:20px" />');
window.URL.revokeObjectURL(fileList[i]);
}
//$(inputLocalFont).hide();
//inputLocalFont = $('<input type="file" class="dimmy" multiple />').appendTo("#filecontainer").get(0);
//inputLocalFont.addEventListener("change", previewImages, false);
}
</script>
@using (Html.BeginForm("Index", "Home", null, FormMethod.Post, new { @enctype = "multipart/form-data" }))
{
<h3>Multiple file upload with asp.net MVCc/MVC3/MVC4/MVC5, C# and HTML5 </h3>
<input type="file" name="files" id="image-input" value="" multiple="multiple" />
<input type="submit" value="Upload You Image" title="Uplad" />
<div style="color: Red; font-size: 14px">@ViewBag.Message</div>
<br />
<br />
<div class="preview-area"></div>
}
所以请帮帮我..