ASP.NET MVC--上传图片(支持移动&PC多张、存储在服务器、request.files取值为空)
网上关于asp.net mvc与js(jquery)配合上传图片例子不多，大多数还是遇见request.files取值是空。遇见这个问题，可能原因大概两个：
1.使用form时没有加enctype="multipart/form-data"；
2.input 没有加名字；
3.前后台传值不正确
关于其他的例子挺多，比如结合form使用，或者使用内置的asp.net语法上传都是可以。
下面介绍一个成功的案例，分为移动端和PC端：
一、移动端
前端代码：
<!--H5-->
//之后为了入库的处理存储位置 主要是上传成功后更新图片路径
<input id="imgTitleUrl" name="imgTitleUrl" type="text" class="form-control " />
<input id="image" name="image" type="file" />
<a href="javascript:;" onclick="SaveImg()" style="background-color: blue;" class="label">上传服务器</a>
<!--JS-->
/**
* 上传图片 单个
**/
function SaveImg() {
// js 获取文件对象
var fileObj = document.getElementById("image").files[0];
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
alert("请选择图片信息！");
return;
}
var formFile = new FormData();
formFile.append("action", "img");
formFile.append("file", fileObj); //加入文件对象
var data = formFile;
$.ajax({
url: '@Url.Action("SaveImg", "MISOpUploadion")',//负责处理的接口
data: data,
type: "Post",
dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
success: function (result) {
/**
result格式：
{
"state":"success/error",
"url":"图片服务器路径"，
"msg":"接口返回提示信息(成功/失败)"，
"code":"错误编码，自定义"
}
**/
if (result.state == "success") {
$("#imgTitleUrl").val(result.url);
alert(result.msg);
} else {
alert(result.msg);
}
},
})
}
后台代码：
/// <summary>
/// 本地上传图片信息至服务器处理
/// </summary>
/// <returns></returns>
[HttpPost]
public ActionResult SaveImg()
{
string imgurl = "";
foreach (string key in Request.Files)
{
//这里只测试上传第一张图片file[0]
HttpPostedFileBase file0 = Request.Files[key];
//转换成byte,读取图片MIME类型
Stream stream;
int size = file0.ContentLength / 1024; //文件大小KB
if (size > 1024)
{
return Json(new {content = "上传图片格式有误！", success = false});
}
byte[] fileByte = new byte[2];//contentLength，这里我们只读取文件长度的前两位用于判断就好了，这样速度比较快，剩下的也用不到。
stream = file0.InputStream;
stream.Read(fileByte, 0, 2);//contentLength，还是取前两位
//获取图片宽和高
//System.Drawing.Image image = System.Drawing.Image.FromStream(stream);
//int width = image.Width;
//int height = image.Height;
string fileFlag = "";
if (fileByte != null && fileByte.Length > 0)//图片数据是否为空
{
fileFlag = fileByte[0].ToString() + fileByte[1].ToString();
}
string[] fileTypeStr = { "255216", "7173", "6677", "13780" };//对应的图片格式jpg,gif,bmp,png
if (fileTypeStr.Contains(fileFlag))
{
string action = Request["action"];
//存储路径 一般情况下都是uploads文件夹
string path = "/uploads/"+DateTime.Now.Year+"/"+ DateTime.Now.Month+"/";
//文件名称 我用的时间+名称处理 一般会增加一个随机数
string fileName = DateTime.Now.Millisecond+Request.Files[key].FileName ;
string fullpath = path;
//校验文件夹是否存在 不存在进行创建
if (!Directory.Exists(Server.MapPath(fullpath)))
{
Directory.CreateDirectory(Server.MapPath(fullpath));
}
//文件保存信息
Request.Files[key].SaveAs(Server.MapPath(fullpath)+ fileName);
//最后输出存储的图片路径信息
imgurl = fullpath + fileName;
}
else
{
return Json("");
}
stream.Close();
}
return Json(new {content = "上传成功", success = true});
}
总结：
1.接口处理的时候 为了省事 直接用Json输出了 这样看起来比较方便，
2.接口处理是可以进行多个图片的处理的， 上述例子中在传值的时候将file[0]删掉。imgurl处理起来也比较快，先判断是否为空，空就取第一个URL，不为空用，(英文)隔开就行。
至于多张图片的样式问题，建议结合jquery使用，特别多张图片的处理。
具体实现：
var fileObj = document.getElementById("choose-file").files;
//原生js获取的DOM集合是一个类数组对象，不能直接利用数组的方法 （例如：forEach，map等），需要进行转换为数组后，才能用数组的方法！
let fileObjList = Array.prototype.slice.call(fileObj);
//处理多张图片上传
for (let i = 0; i<fileObjList.length; i++) {
formFile.append("file"+i, fileObjList[i]);
}
原理就是formFile append 多个键值对，后台根据Request.Files的key进行循环存储图片。
3.例子中使用的判断文件格式可能有点繁琐，建议使用后缀判断，但是这也是个方法判断。
4.ajax那里的URL建议使用razor自带的语法吗，这样上传到服务器就不会出现请求异常。
二、PC端
前端使用Layui框架：
html部分：
<button type="button" class="layui-btn layui-btn-danger" id="ImgUpload" style="margin-top: 5px"><i class="layui-icon"></i>上传图片</button>
<span id="appendTo"></span>
<span style="margin-left: 5px">图片大小不超过4M。</span>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
js部分：
//上传图片，设定文件大小限制
upload.render({
elem: '#ImgUpload',
url: '@Url.Action("Upload", "MISOption")',//此处配置你自己的上传接口即可,
// size: 4096 //限制文件大小，单位 KB, 4096代表4M,
before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('#appendTo').append('<span class="delete-css"><button id="upload_img" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon"></i></button></span>');
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="100px" height="200px">');
//删除某图片
$("#upload_img").bind('click', function () {
delete file;
$("#container").remove();
var demoText = $('#demoText');
demoText.html('');
$("#ImgUpload").attr("disabled",false);
});
});
},
done: function(res){
$("#ImgUpload").attr("disabled","true");
layer.msg('仅支持上传一张图片！');
// console.log(res)
}
});
后端部分：
//保存图片，获取图片存储本地的URL，然后存入数据库
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
//获取文件
HttpPostedFileBase proImage = Request.Files["imgUploadName"]; //获取上传的图片
if (file != null)
{
if (file.ContentLength == 0)
{
return Json(new {content = "不可上传空图片！", success = true});
}
else
{
string fileName = file.FileName;
string fileFormat = fileName.Split('.')[fileName.Split('.').Length - 1]; // 以“.”截取，获取“.”后面的文件后缀
Regex imageFormat = new Regex(@"^(bmp)|(png)|(gif)|(jpg)|(jpeg)"); // 验证文件后缀的表达式（自己写的，不规范别介意哈）
if (string.IsNullOrEmpty(fileName) || !imageFormat.IsMatch(fileFormat)) // 验证后缀，判断文件是否是所要上传的格式
{
Json(new {content = "上传图片格式有误！", success = false});
}
else
{
string timeStamp = DateTime.Now.Ticks.ToString(); // 获取当前时间的string类型
string firstFileName = timeStamp.Substring(0, timeStamp.Length - 4); // 通过截取获得文件名
string imageStr = "Upload/"; // 获取保存图片的项目文件夹
string uploadPath = Server.MapPath("~/" + imageStr); // 将项目路径与文件夹合并
string pictureFormat = fileName.Split('.')[fileName.Split('.').Length - 1]; // 设置文件格式
string saveFileName = firstFileName + "." + fileFormat; // 设置完整（文件名+文件格式）
string saveFile = uploadPath + saveFileName; //文件路径
file.SaveAs(saveFile); // 保存文件
// 如果单单是上传，不用保存路径的话，下面这行代码就不需要写了！
Global.imageUrl = imageStr + saveFileName; // 设置数据库保存的路径
return Json(new {content = saveFileName, success = true});
}
}
}
return Json(new {content = "图片保存失败！", success = true});
}
