上传图片

开发工具与关键技术：Visual Studio2015
作者：邹铭霞
撰写时间：2019年3月28日

读取图片文件接口
FileReader接口提供了一个异步的API,通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去
选择照片：用FileReader对象来读取本地数据，并且将数据结果赋值给image和src
HttpPostedFileBase:将页面的图片传输到控制器中

Controllers代码：
    byte[] imgFile = null;//读取上传的图片
    //判断是否上传图片（判断图片的值&&判断图片的长度）
    if (fileAccessoriesImage != null && fileAccessoriesImage.ContentLength > 0)  {
	       //有上传图片 
	      imgFile = new byte[fileAccessoriesImage.ContentLength];//初始化为图片的长度
															     //读取该文件的图片
															     //将图片转化为流结束位置
															     //将读取为byte[]，参数：byte[]，读取开始位置，读取字节数
	      fileAccessoriesImage.InputStream.Read(imgFile, 0, fileAccessoriesImage.ContentLength);
      }
View代码：
	//FileReader:接口用于读取文件
    var imgReaderI = new FileReader();
    //图片文件用正则表达式过滤（此表达式是用来确保上传的文件是一张图片）
    regexImageFilter = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg)$/i;
    //调用FileReader接口的onload方法，回调函数得到的evt是图片的URL链接
    imgReaderI.onload = function (evt) {
	    //将结果赋值给image的src
	    $("#FittingsPicture").attr('src', evt.target.result);
     }
    //获取选择文件的按钮，调用改变事件
    $("#IStudentPicture").change(function () {
	    //获取通过”选择文件”的按钮上传的文件
	    //prop添加属性名称（跟attr属性一样是给标签添加属性，但是它们是有区别的），加载image标签中
    	var imgfFile = $("#IStudentPicture").prop('files')[0];
	    //调用正则表达式过滤图片
	    if (!regexImageFilter.test(imgfFile.type)) {
	      	 layer.msg('选择的不是一个有效的图片文件', { icon: 0 });
	      }//readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL；将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了
          imgReaderI.readAsDataURL(imgfFile);
      })

效果截图：
点击图1中的选择文件按钮，就会弹出文件选择框

（图1）
选择相对应的图片并确定