选择本地照片之后即显示在Img中(客户体验)

最近转战MVC项目，然后又再次遇到照片上传的实现，之前都是使用ASP.NET，虽然也有照片上传，而且出于客户体验考虑，

也实现了选择本地照片之后即时显示在IMG中，在这里就简单介绍其实现（ASP.NET），代码就不再写了

• ASP.NET实现方式(当时使用的是服务器控件UpLoad):
  • 一个Img控件，一个UpLoad控件
    • 先创建另一个新的ASP.NET页面，上传照片的时候，先把照片上传显示在这个ASP.NET页面上，然后IMG中的src链接到这个页面就O了(方法很笨，但是刚出来就是这么实现的，现在可以用插件实现了)
• MVC实现方式(使用的是Input中的File)
  • 一个Img标签，一个file标签
    • 实现方式

    •     //读取图片并显示到img
          function readFile() {
              var file = this.files[];
              if (!/image\/\w+/.test(file.type)) {
                  alert("文件必须为图片！");
                  return false;
              }
              var reader = new FileReader();
              reader.readAsDataURL(file);
              reader.onload = function (e) {
                  $("#ComPic").attr("src", this.result);
              }
          }
      
          $(function () {
              var input = document.getElementById("fileToUpload");
              //先判断浏览器是否支持FileReader
              //浏览器不支持时则选择照片的的标签被禁用
              if (typeof FileReader === 'undefined') {
                  alert("抱歉，你的浏览器不支持 FileReader");
                  input.setAttribute('disabled', 'disabled');
              } else {
                  input.addEventListener('change', readFile, false);
              }
          });

    • 到这里，选择图片之后就可以显示了，但是该注意的是，IE6以下(包含IE6)版本是不支持FileReader的
    • 之后就是图片的上传了(在这里，我使用的是异步上传操作，而且数据库中保存的是图片路径，而图片上传到指定的文件夹下)

      var fileObj = document.getElementById("fileToUpload").files;
      var FileController = "/Member/Shop/UpLoadIMG" + "?PicName=" + picName + "&PicType=" + picType;
      var form = new FormData();
      
       for (var i = 0; i < fileObj.length; i++)
                   form.append("file" + i, fileObj[i]);
       var xhr = new XMLHttpRequest();
       xhr.open("post", FileController, true);
       xhr.onload = function () {
                    if (xhr.status == 200 && xhr.responseText == "1") {
                              alert("图片上传成功!");
      
                     } else {
      　　                    //图片上传异常时返回的信息
                              alert(xhr.responseText);
                          }
                      };
                      xhr.send(form);

• 还有另外一种实现方式，就是使用UpLoadify，可以实现批量上传图片或者文件，包括进度条，这个插件官方文档已有详细介绍，在这就不再多说了。。