标签：files ASP string -- fileName file new 上传 图片
网上关于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});
}
标签：files,ASP,string,--,fileName,file,new,上传,图片 来源： https://www.cnblogs.com/schaffery/p/15974426.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。