asp.net mvc之图片上传，webuploader多实例上传疑问，在这里轻松解决！
Posted enjsky.G
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了asp.net mvc之图片上传，webuploader多实例上传疑问，在这里轻松解决！相关的知识，希望对你有一定的参考价值。
前言
最近在做MVC项目，在处理图片上传功能上遇到了一道坎。之前是使用webuploader插件实现图片上传，但在处理多实例问题时，一直难以跨过。几经思索，再次踏上了学习之路。
疑难问题
1.在之前使用webuploader时,在处理多图上传问题上，疑惑众多。
2.其在处理多实例问题上，也存在问题，虽说功能强大，但后期维护过于繁琐，给项目进度照常影响。
解决方案
对于以上问题，我们将换种方式去处理，基本思路是使用input 的file文件属性来实现图片上传的功能。这次功能实现采用两个实例（即在一个页面有多个独立的图片上传按钮及图片展示区），并却实现多图上传。
上传图片并显示
1.实现布局
在表单中实现基础布局，设置相应属性，代码如下：
<tr class="uploader_row">
<td>主题图片</td>
<td colspan="7" class="img">
<div id="file_list1">
<img id="default_img" />
</div>
</td>
<td class="img" valign="middle" colspan="2">
<div>
<div id="uploader" class="webuploader">
<div class="upload_btns">
<!-- 只接受jpg，gif和png格式 -->
<input id="upload_input" type="file" accept="image/gif, image/jpg, image/png,image/jpeg,image/bmp" multiple onchange="showImg(this,@Id, 0)" />
<span id="upload">选择并上传文件</span>
<span class="upload_input_rmk">支持多图上传</span>
</div>
</div>
</div>
</td>
</tr>
<tr class="uploader_row">
<td>详情图片</td>
<td colspan="7" class="img">
<div id="file_list2">
<img id="default_img" />
</div>
</td>
<td class="img" valign="middle" colspan="2">
<div>
<div id="uploader" class="webuploader">
<div class="upload_btns">
<!-- 只接受jpg，gif和png格式 -->
<input id="upload_input" type="file" accept="image/gif, image/jpg, image/png,image/jpeg,image/bmp" multiple onchange="showImg(this,@Id, 1)" />
<span id="upload">选择并上传文件</span>
<span class="upload_input_rmk">支持多图上传</span>
</div>
</div>
</div>
</td>
</tr>
【内容解析】
1.实现图片上传使用input file文件类型。
2.设置可上传图片格式，使用accept属性：image/gif, image/jpg, image/png,image/jpeg,image/bmp。
3.设置多图上传属性multiple。
2.图片浏览上传及显示
在上一步中，已经布局好图片上传，现在实现上传及显示。读取图片文件并显示，这里使用两种方式实现，如下：
1）使用window.URL.createObjectURL(file)读取file实例并显示图片
//显示图片
function showImg(obj, id, type) {
var files = obj.files;
//使用window.URL.createObjectURL(file)读取file实例并显示图片
document.getElementById("imgContainer").innerhtml = getImgsByUrl(files);
}
// 使用window.URL.createObjectURL(file)读取file实例并显示图片
function getImgsByUrl(files) {
var elements = ''
for (var i = 0; i < files.length; i++) {
var url = window.URL.createObjectURL(files[i])
elements += "<img src='" + url + "' style='width: 60px; height: 50px; vertical-align: middle; margin-right: 5px;' />"
}
return elements
}
2）使用FileReader读取file实例并显示图片
//显示图片
function showImg(obj, id, type) {
var files = obj.files;
//使用FileReader读取file实例并显示图片
getImgsByFileReader(document.getElementById("file_list"), files, id, type);
}
// 使用FileReader读取file实例并显示图片
function getImgsByFileReader(el, files, id, type) {
for (var i = 0; i < files.length; i++) {
let img = document.createElement('img');
img.setAttribute('style', 'width: 60px; height: 50px; vertical-align: middle; margin-right: 5px;');
el.appendChild(img);
var reader = new FileReader()
reader.onload = function (e) {
img.src = e.target.result;
}
reader.readAsDataURL(files[i]);
}
}
上传到服务端及实现操作功能
1.上传到服务端
使用jQuery中的Ajax请求发送文件到服务端处理文件。
1）客户端实现，代码如下：
//显示图片
function showImg(obj, id, type) {
var files = obj.files;
var params = new FormData();
for (var i = 0; i < files.length; i++) {
params.append("file", files[i]);
}
UploadData(params, id, type);
}
//上传图片文件到服务端
function UploadData(params, id, type) {
$.ajax({
url: "/OffWeb/FileLoad?id=" + id + "&type=" + type,
type: 'POST',
data: params,
async: false,
dataType: "json",
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
success: function (data) {
if (data.Code == 1) {
console.log(data, "data");
LoadData(id, type);
}
},
error: function (data) {
console.log("error2");
}
});
}
【内容分析】
1.上传到后台使用FormData发送数据。
2.请求中设置以下属性，未设置会出现异常。
①processData属性，告诉jQuery不要去处理发送的数据，processData: false
②contentType属性，告诉jQuery不要去设置Content-Type请求头，contentType: false
2)服务端实现，代码如下：
/// <summary>
/// 接收上传文件
/// </summary>
/// <param name="id">资源id</param>
/// <returns></returns>
[HttpPost]
public JsonResult FileLoad()
{
var itemId = Request.QueryString["id"];
var type = Request.QueryString["type"];
HttpFileCollectionBase fileData = Request.Files;
for (int i = 0; i < fileData.Count; i++)
{
var x = Request.Files[i]; //上传文件控件名,获取二进制图片文件流
var ind = x.FileName.LastIndexOf('.'); //截取文件名最后出现‘.’的位置
var extName = x.FileName.Substring(ind);
var yearMonth = DateTime.Now.ToString("yyyyMM");
var path = Server.MapPath("/_R/tc_web_uploads/" + yearMonth + "/");//路径
if (!System.IO.Directory.Exists(path)) System.IO.Directory.CreateDirectory(path);
var filename = NewId.NewRandomFileName() + extName;//文件名
var filePath = path + filename;//文件路径
Request.Files[i].SaveAs(filePath);//保存上传文件到指定路径
Session["file"] = filename;
//写入数据库
OffWebBus.Instance.SaveImg("/_R/tc_web_uploads/" + yearMonth + "/" + filename, Int32.Parse(itemId), Int32.Parse(type));
}
return Json(new RetObj());
}
【内容解析】
1.使用Request.Files获取客户端上传的文件，接收类型HttpFileCollectionBase。
2.操作功能实现
实现加载图片、显示缩略图、删除图片的功能
1）加载图片
①客户端
//加载图片
function LoadData(id, type) {
AppCommon.ajax({
url: "/OffWeb/LoadImg?id=" + id + "&type=" + type,
type: "POST",
datatype: "json",
success: function (data) {
displayImgs(data, id, type);
},
error: function () {
MsgBox.Prompt("请求出错！");
}
});
}
②服务端
/// <summary>
/// 加载图片
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
[HttpPost]
public JsonResult LoadImg(int id, int type)
{
var imgs = string.Join("|", OffWebBus.Instance.GetImgs(id, type));
// 读取相关的图片文件
return Json(new RetObj(imgs));
}
2）显示缩略图
//显示缩略图
function displayImgs(imgs, itemId, type) {
//debugger;
if (imgs == null || imgs == undefined) return;
var arr = imgs.split('|');
var imgStr = '';
if (type == 0) {
$("#file_list1").empty();//显示缩图
for (i = 0; i < arr.length; i++) {
imgStr += '<a href="' + arr[i] + '" rel="lytebox">';
if (imgs == "") {
imgStr += '<img src="' + arr[i] + '"/></a><input class="del_x" style="display:none;" id="del_x" type="button" value="x" itemId="' + itemId + '" val="' + arr[i] + '" οnclick="delImg(this,' + type + ')">';
} else {
imgStr += '<img src="' + arr[i] + '"/></a><input class="del_x" id="del_x" type="button" value="x" itemId="' + itemId + '" val="' + arr[i] + '" οnclick="delImg(this,' + type + ')">';
}
}
$("#file_list1").html(imgStr);
} else {
$("#file_list2").empty();//显示缩图
for (i = 0; i < arr.length; i++) {
imgStr += '<a href="' + arr[i] + '" rel="lytebox">';
if (imgs == "") {
imgStr += '<img src="' + arr[i] + '"/></a><input class="del_x" style="display:none;" id="del_x" type="button" value="x" itemId="' + itemId + '" val="' + arr[i] + '" οnclick="delImg(this,' + type + ')">';
} else {
imgStr += '<img src="' + arr[i] + '"/></a><input class="del_x" id="del_x" type="button" value="x" itemId="' + itemId + '" val="' + arr[i] + '" οnclick="delImg(this,' + type + ')">';
}
}
$("#file_list2").html(imgStr);
}
initLytebox();
}
3）删除图片
①客户端
//删除图片
function delImg(obj, type) {
AppCommon.ajax({
url: "/OffWeb/DeleteImgs?path=" + $(obj).attr("val") + "&id=" + $(obj).attr("itemId") + "&type=" + type,
type: "POST",
datatype: "json",
success: function (data) {
loadData();
},
});
}
②服务端
/// <summary>
/// 删除图片
/// </summary>
/// <param name="path"></param>
/// <returns></returns>
[HttpPost]
public JsonResult DeleteImgs(string path, int id, int type)
{
OffWebBus.Instance.SaveDelImg(path, id, type);
return Json(new RetObj());
}
封装图片上传文件
为了增强代码的复用性，我们将以上函数进行封装，方便后续调用，这里我们将其封装未uploader.js文件。完整代码内容如下：
1.封装uploader.js文件
使用input file文件属性实现图片上传功能。
accept：设置图片格式，如：image / gif, image / jpg, image / png, image / jpeg, image/bmp
multiple：支持多图上传
//显示图片
function showImg(obj, id, type) {
var files = obj.files;
var params = new FormData();
//使用window.URL.createObjectURL(file)读取file实例并显示图片
// document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
//使用FileReader读取file实例并显示图片
//getImgsByFileReader(document.getElementById("file_list"), files, id, type);
for (var i = 0; i < files.length; i++) {
params.append("file", files[i]);
}
UploadData(params, id, type);
}
// 使用window.URL.createObjectURL(file)读取file实例并显示图片
function getImgsByUrl(files) {
var elements = ''
for (var i = 0; i < files.length; i++) {
var url = window.URL.createObjectURL(files[i])
elements += "<img src='" + url + "' style='width: 60px; height: 50px; vertical-align: middle; margin-right: 5px;' />"
}
return elements
}
// 使用FileReader读取file实例并显示图片
function getImgsByFileReader(el, files, id, type) {
var params = new FormData();
if (document.getElementById('default_img') != null) {
document.getElementById('default_img').remove();
}
for (var i = 0; i < files.length; i++) {
let img = document.createElement('img');
img.setAttribute('style', 'width: 60px; height: 50px; vertical-align: middle; margin-right: 5px;');
el.appendChild(img);
var reader = new FileReader()
reader.onload = function (e) {
img.src = e.target.result;
}
reader.readAsDataURL(files[i]);
params.append("file", files[i]);
}
UploadData(params, id, type);
}
以上是关于asp.net mvc之图片上传，webuploader多实例上传疑问，在这里轻松解决！的主要内容，如果未能解决你的问题，请参考以下文章
Asp.Net MVC 在 Edit Get 中编辑上传的图片（HTTPPostedFileBase）