图片路径

1. 以前在MVC里面写存储图片这种类型呢是直接将图片转换成二进制后存储到数据库中的，一直用layui插件来渲染表格显示数据和serializeArray来获取form表单数据提交都没什么问题，但是后来当我的图片的数据存储多了。就出现了问题，它提示我说：‘JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串的长度超过了为 maxJsonLength 属性设置的值。’ ，而他一直报的都是‘500’的错和一些不相关的数据提示，但是他真正的错误其实是图片的数量的的数据量过多了，所有为了解决这个问题，我将图片的存储方式换成了数据库存储图片的路径。

2. HTML的图片的样式：

3.                              <img src="" alt="" width="200" height="220" id="InImgUserPicture" class="border border-primary" ondblclick="showImageFile('InUserPicture')" />
   

4.                              <input type="file" name="fileUserPictureImage" id="InUserPicture" hidden accept="image/*" onchange="loadImgToEimg('InUserPicture')" />
   

5.                          </div>
   

6. Scipt的声明图片变量和处理图片格式的正则：

7. var imgReader = new FileReader();

8.      regexImageFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
   

9. 之后就是处理选中的图片是否符合图片的格式：
   function showImageFile(imageFileId) {
   $("#" + imageFileId).click();
   }
   function loadImgToEimg(imageFileId) {
   var imgfFile = $("#" + imageFileId).get(0).files[0];
   if (!regexImageFilter.test(imgfFile.type)) {
   layer.msg(‘选择的不是一个有效的图片文件’, { icon: 2 });
   }
   imgReader.readAsDataURL(imgfFile);
   }

10. 经过验证图片后就是将图片的数据绑定到img里面同时呢也显示在页面上让你看的到你所选中的图片：
    imgReader.onload = function (evt) {
    $("#InImgUserPicture").attr(“src”, evt.target.result);
    }

11. 最后才是将所绑定的图片数据传到控制器来处理最后的操作和将图片的路径存储到数据库和图片存储到文件夹里面，最后跟着其它数据一起保存。首先还是判断有没有值过来，然后声明一个字符串来接收图片，之后再以现在的时间加上唯一标识符和那个字符串，然后判断这个VS里面是否有这个文件夹？没有就创建一个，之后再调用这个文件夹路径加上图片名称，最后保存到数据库那个用来装图片的那个字段。不过这个方法传的值是HttpPostedFileBase fileUserPictureImage：

12. if (fileUserPictureImage != null && fileUserPictureImage.ContentLength > 0) {

13. string fileType = System.IO.Path.GetExtension(fileUserPictureImage.FileName);

14. string filename = DateTime.Now.ToString(“yyyy-MM-dd”) + “-” + Guid.NewGuid() + fileType;

15. if (!Directory.Exists(Server.MapPath("~/SaveData/MemoryUser/UserImage/"))){

16.    Directory.CreateDirectory(Server.MapPath("~/SaveData/MemoryUser/UserImage/"));
    

17. }

18. string filePath = Server.MapPath("~/SaveData/MemoryUser/UserImage/") + filename;

19. fileUserPictureImage.SaveAs(filePath);

20. tsub.Picture = “/SaveData/MemoryUser/UserImage/” + filename;

21. }

22. 最后做回填数据时，也是跟着那些数据一起查回来，$("#UpImgUserPicture").attr(“src”, data.Picture);