最近转战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[0];        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，可以实现批量上传图片或者文件，包括进度条，这个插件官方文档已有详细介绍，在这就不再多说了。。

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