_上传图片

撰写日期：2019年05月05日

上传图片就跟QQ更换头像的原理类似，通过一些验证把图片上传到网络上。

先搭建一个可以容纳图片的盒子：

然后写方法将图片写入网络数据中：

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

  //打开file表单，选择图片
  function chooseImageFile(inputFileID) {
      $("#" + inputFileID).click();
       }
  //创建FileReader对象
      var imgReader = new FileReader();
  //正则表达式 过滤图片文件
     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;
 //file表单改变事件，将选择的图片显示到img元素
  function showImgToView(inputFileId) {
 //选择图片文件
      var imgFile = $("#" + inputFileId).get(0).files[0];
 //console.log(imgFile);
 //判断上传文件是否为图片格式
  if (!regexImageFilter.test(imgFile.type)) {
      layer.msg("请选择有效的图片文件", { icon: 0, title: "提示" });
      }
  else {
 //readAsDataURL()方法可以获取API异步读取的文件数据，另存为数据URL;
  //FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。
  //Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。
      imgReader.readAsDataURL(imgFile);
      }
    }
  //读取文件 onload事件
      imgReader.onload = function (evt) {
  //console.log(evt);
  //将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。
      $("#IsImgStudentPicture").attr("src", evt.target.result);
      $("#UsImgStudentPicture").attr("src", evt.target.result);
  };

双击弹出添加附件链接窗口，选择需要图片：

如有错漏，感谢纠正！