.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);        }

这样他就可以在添加修改时实现实时预览了。

---

---

---

如果有补充，或者什么问题欢迎留言，一起讨论。后期如果有什么修改，我会及时进行标注。