.net使用Easyui+MVC进行图片上传的实现
图片上传使用的是Easyui+MVC,用from表单进行提交,并将图片名称和后缀提交到数据库。有一些功能可能不够完善，欢迎进行补充。
先上效果图
下边直接上代码：
（1）先在要提交的表单中添加上传框，再加一个图片显示，可以让他在添加的时候进预览。
<input id="tj" type="file" value="选择照片" name="imgs" />
<img id="tt" src="../Images/aaa.jpg" style='width:60px; height:60px' />（2）在后台添加文件传输到服务器的代码
单张图片上传
HttpFileCollectionBase files = Request.Files;
HttpPostedFileBase file = files["img"];
//获取文件后缀名
string extName = Path.GetExtension(file.FileName).ToLower();
if(extName!=".jpg"||extName!=".gif"||extName!=".bmp"||extName!=".png")
{
string ls = "上传了不被识别的格式，请重新上传";
return null;
}
//获取保存目录的物理路径
string path = Server.MapPath("~/Img/");
//生成新文件的名称，guid保证某一时刻内唯一的（保证了文件不会被覆盖）
string fileNewName = System.Guid.NewGuid().ToString();
file.SaveAs(path + fileNewName + extName);这是单张图片进行上传，里边我都加了注释说明。
下边上多张图片的代码
//多张图片上传
HttpFileCollectionBase files = Request.Files;
foreach (var item in files.AllKeys)
{
HttpPostedFileBase file = files[item];
//获取文件后缀名
string extName = Path.GetExtension(file.FileName).ToLower();
//获取保存目录的物理路径
string path = Server.MapPath("~/Img/");
//生成新文件的名称，guid保证某一时刻内唯一的（保证了文件不会被覆盖）
string fileNewName =System.Guid.NewGuid().ToString();
file.SaveAs(path + fileNewName + extName);
}然后是异步上传
HttpFileCollectionBase files = Request.Files;
HttpPostedFileBase file = Request.Files["imgs"];
string extName = Path.GetExtension(file.FileName).ToLower();
string path = Server.MapPath("~/Img/");
//生成新文件的名称，guid保证某一时刻内唯一的（保证了文件不会被覆盖）
string fileNewName = System.Guid.NewGuid().ToString();
file.SaveAs(path + fileNewName + extName);
model.img = fileNewName+extName;我传输的都是文件名加后缀，并且都是在添加和修改方法中写的，如果有个人其他需求，可以在另外写到不同的地方。
（3）然后就是前台显示了
{ title: '营业执照', field: 'img', halign: 'center', align: 'center', sortable: true, formatter: function (value, row) {
if (typeof (row.img) != "undefined") {
row.img = "<img src='../Img/"+ row.img +"' style='width:60px; height:60px' />";
}
return row.img;
}
},在这之后你弹出表单抓取数据时，需要加上
$("#tt").attr("src", "../Images/" + data.img);来获取现在图片显示的功能。
（4）对，还有表单提交的内容，这样彩后详细
$("#fm").form("submit", {
url: url,
success: function (data) {
var data = eval('(' + data + ')');
$("#storelist").datagrid("load", {});
$.messager.alert("提示", data.msg, "info");
$("#dptdialog").dialog("close");
$("#fm").form("reset");
},
error: function () {
$.messager.alert("警告", "对不起，系统出现故障，请联系管理员！", "error");
$("#dptdialog").dialog("close");
$("#fm").form("reset");
},
});fm是我form表单的ID，url调的是他上边修改的url。
在form表单上需要加上enctype="multipart/form-data" method="post"
<form id="fm" enctype="multipart/form-data" method="post">否则后台file 会一直报空。
重点还得说的是， form提交不能直接解析Json，需要用var data = eval('(' + data + ')');来先进行Json解析。
在执行完上边以后你的照片应该可以正常上传了，但是你会发现照片没有办法实时预览。这个时候，你对表单的图片在首次加载上进行异步提交
$("#tj").change(function () {
$("#fm").form("submit", {
url: "/Store/UpLoad",
success: function (data) {
$("#tt").attr("src", "/Images/" + data);
}
});
});下边是他的后台代码
public ActionResult UpLoad()
{
HttpFileCollectionBase files = Request.Files;
HttpPostedFileBase file = Request.Files["imgs"];
string extName = Path.GetExtension(file.FileName).ToLower();
string path = Server.MapPath("~/Images/");
//生成新文件的名称，guid保证某一时刻内唯一的（保证了文件不会被覆盖）
string fileNewName = System.Guid.NewGuid().ToString();
file.SaveAs(path + fileNewName + extName);
return Content(fileNewName + extName);
}这样他就可以在添加修改时实现实时预览了。
如果有补充，或者什么问题欢迎留言，一起讨论。后期如果有什么修改，我会及时进行标注。
