MVC中通过jquery实现图片预览上传，并对文件类型大小进行判断（极简）
Posted lfq761204
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了MVC中通过jquery实现图片预览上传，并对文件类型大小进行判断（极简）相关的知识，希望对你有一定的参考价值。
一、易出错问题重要提示
当直接通过提交表单数据上传文件时，文件上传控件input一定要添加name属性，并且不同的控件也要设置不同的name属性值，否则会导致控制器中的Request.Files方法获取上传文件失败。估计Request.Files方法是通过input控件的name属性来识别并区别上传文件的。
二、动态增减上传控件，多文件上传
视图代码
@{Layout=null;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVC+jquery</title>
<script src="~/Scripts/jquery.min.js"></script>
<script>
$(function() {
var nameId=0; //标识文件上传控件name属性值序列
$("#AddInput").click(function() {
//动态增减文件上传控件
//上件上传input控件必须要添加name属性，不同控件的name值不能相同，否则会导致控件器中Request.Files方法获取上传文件失败。
$("#FileControls").append("<p><input type='button' value='-' onclick=$(this).closest('p').remove() /> <input type='file' name='file"+toString(++nameId)+"' /></p>");
//对文件上传控件添加onchange事件，验证文件类型、大小，并对符合要求的图片进行预览显示
$("#FileControls :file").change(function() {
if($(this).val()=="") return; //如果未选择文件则跳过不检查
//检测选择文件的类型，清除不符合类型要求的文件
if(!/(jpg|png|gif|jpeg)$/i.test($(this).val())) {
alert("请上传jpg、png、gif类型的图片文件！");
$(this).val(""); //清除不符合类型要求的文件
return;
}
//检测文件的大小，清除不符合类型要求的文件
if(this.files[0].size>500*1024) { //500*1024为500K
alert("文件太大，请重新选择！");
$(this).val("");
return;
}
//这里的createObjectURL方法是针对chrome核心的浏览器，其它核心自行百度
var url=window.webkitURL.createObjectURL(this.files[0]);
$("#ImagePreview").attr("src",url);
$("#ImagePreview").css("display","block");
});
});
$("#AddInput").click(); //向页面添加一个文件上传控件
});
</script>
</head>
<body>
<form action="~/FileUpload/UploadSubmit" method="post" enctype="multipart/form-data">
<div id="FileControls">
<div>上传文件 <input type="button" style="width:80px;" id="AddInput" value="+" /></div>
</div>
<div><img id="ImagePreview" style="display:none;width:300px;border:1px;" onclick="this.style.display='none';" /></div>
<input type="submit" value="直接提交表单数据上传" />
</form>
</body>
</html>控制器代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace XLZXXX.Controllers{
public class FileUploadController : Controller{
public ActionResult FileUploadSubmit(){
return View();
}
public string UploadSubmit() {
HttpFileCollectionBase files = Request.Files;
int fileCount = 0; //统计上传成功的文件个数
for(int i = 0;i<files.Count;i++) {
//跳过未选拔文件的input控件
if(files[i]==null||files[i].ContentLength==0) continue;
//上传文件，文件名与上传文件的文件名同名。也可以用Guid.NewGuid().ToString("N")全局唯一标识符来命名文件名
files[i].SaveAs(Server.MapPath("~/upload/"+files[i].FileName));
fileCount++;
}
return string.Format("【{0}】个文件上传成功",fileCount);
}
}
}三、通过juqery的$.ajax异步上传
视图代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVC+jquery</title>
<script src="~/Scripts/jquery.min.js"></script>
<script>
$(function() {
//上传文件按钮的click事件
$("#btnSubmit").click(function() {
var hasFile=false; //设置变量，记录是否选择文件
var form=new FormData();
//遍历文件上传控件，并将文件信息写入FormData对象
$("#FileControls :file").each(function() {
if($(this).val()!="") {
//使用append方法将文件信息写入FormData对象，HTML代码中文件上传控件input可以无name属性，
form.append("file",$(this)[0].files[0]);
hasFile=true;
}
});
//如果一个文件都没有选择则跳出此函数
if(!hasFile) {
alert("请至少选择一个上传的文件。"); return;
}
//上传文件，并返回以“,”连接的文件名，成功后返回文件名值、清空文件上传控件内容
$.ajax({
url: "UploadAjax",type: "post",async: true,processData: false,contentType: false,
data: form,
success: function(data) {
alert(data+"上传成功");
$("#FileControls :file").val("");
$("#lblFiles").text(data);
},
});
});
});
</script>
</head>
<body>
<p>文件：<label id="lblFiles"></label></p>
<div id="FileControls">
<p><input type="file" /></p>
<p><input type="file" /></p>
</div>
<p><input type="button" id="btnSubmit" value="通过ajax上传文件并提交表单" /></p>
</body>
</html>控制器代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace XLZXXX.Controllers{
public class FileUploadController : Controller{
public ActionResult FileUploadAjax() {
return View();
}
//这是query的ajax调用的函数
public string UploadAjax() {
HttpFileCollectionBase files = Request.Files;
//用List记录上传文件的文件名
List<string> filesStr = new List<string>();
for(int i = 0;i<files.Count;i++) {
files[i].SaveAs(Server.MapPath("~/upload/"+files[i].FileName));
filesStr.Add(files[i].FileName);
}
return string.Join(",",filesStr.ToArray());
}
}
}四、单文件上传（无js代码）
视图代码
@{Layout=null;}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MVC+jquery</title>
</head>
<body>
<form action="~/FileUpload/UploadSingle" method="post" enctype="multipart/form-data">
<p><input type="file" name="inputName" /></p>
<input type="submit" value="单个文件上传" />
</form>
</body>
</html>控制器代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace XLZXXX.Controllers{
public class FileUploadController : Controller{
public ActionResult FileUploadSingle() {
return View();
}
public string UploadSingle(HttpPostedFileBase inputName) { //这里的参数名inputName一定要和视图里input文件上传控件的name属性值相同
if(inputName==null) return "没有选择文件";
inputName.SaveAs(Server.MapPath("~/upload/"+inputName.FileName));
return "文件上传成功";
}
}
}
以上是关于MVC中通过jquery实现图片预览上传，并对文件类型大小进行判断（极简）的主要内容，如果未能解决你的问题，请参考以下文章
在 ASP.NET MVC 中通过 JQuery AJAX 上传文件