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