简单快捷的实现图片上传预览效果

如何简单快捷的实现图片上传预览效果，想必这是绝大多数的c#新手遇到的一个小难题。

我学习c#也有一年的时间了，就把一个简单的方法给大家看看。

如下：

readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了：

readAsDataURL()是FileReader对象中的一个方法

看代码：

1.var imgaReaderI = new FileReader();2. regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;3. imgaReaderI.onload = function (evt) {4. $("#IimgPicturer").attr("src", evt.target.result);5. }6. $("#fileImg").change(function () {7. var imgafFile = $("#fileImg").prop('files')[0];//prop添加属性名称8. //加载image标签中9. if (!regexImageFilter.test(imgafFile.type)) {10.layer.msg('选择的不是一个有效的图片文件', { icon: 0 });11. } //readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。12. imgaReaderI.readAsDataURL(imgafFile);13. })

/^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i; ——可以用这些格式的图片类型

而以上代码中注释的字体就是解析；

上面是视图的js代码，下面则是控制器所写的代码：

1.public ActionResult InsertModeofPayment(SYS_PaidType sysPaidType, HttpPostedFileBase fileImg)2. {3. string strMsg = "failed";4. try5. {6.//判断支付类型表中是否已经存在新增的支付信息7.var stuCount = (from tbPaidType in myModels.SYS_PaidType8. where tbPaidType.PaidTypeID == sysPaidType.PaidTypeID ||9. tbPaidType.PaidMC == sysPaidType.PaidMC10. select tbPaidType).Count();11.if (stuCount == 0)12.{13.SYS_PaidType dbPaidType = new SYS_PaidType();14.dbPaidType.PaidMC = sysPaidType.PaidMC;15.dbPaidType.Introduces = sysPaidType.Introduces;16.dbPaidType.Status = "开启";17.dbPaidType.WhetherAddition = "未添加";18.dbPaidType.Expurgate = "未删除";19.//声明一个byte[](字节型数组)来保存新增的图片20.byte[] imgFile = null;21.//判断传入的图片是否为空22.if (fileImg != null && fileImg.ContentLength > 0)23.{24. //初始化数组的长度，为节省空间，长度由实际上传的图片的长度决定25. imgFile = new byte[fileImg.ContentLength];26. //读取该图片文件27. //将图片转为流结束位置28. //将流读取为byte[]，参数：byte[]，读取开始位置，读取字节数29. fileImg.InputStream.Read(imgFile, 0, fileImg.ContentLength);30.}31.dbPaidType.PaidLogo = imgFile;32.myModels.SYS_PaidType.Add(dbPaidType);33.myModels.SaveChanges();34.strMsg = "success";35.}36.else37.{38.strMsg = "该支付信息已经存在，不需要重复输入数据！";39.}40. }41. catch (Exception)42. {43.strMsg = "failed";44. }45. return Json(strMsg, JsonRequestBehavior.AllowGet);}

第19到28行便是图片所需的代码；

点击图片选择所需图片便可在页面是如下所示：

上图便是所浏览图片；

注：（页面里内容仅供参考，别无他用）