预览后上传图片

具体要做的就是页面上有个的按钮，用户在选择需要上传的图片后，页面上将要上传的图片预览出来。
以前的做法是，通过Ajax将要上传的图片上传到服务器，服务器响应成功后在页面上添加一张图片。如果上传错误，则需要将服务器上的图片也删除。
现在可以通过H5这样做，代码如下：

document.querySelector('#upfile').onchange = function (evt) {
    var files = evt.target.files;
    for(var i = 0, f; f = files[i]; i++){
        if(!f.type.match('image.*')) continue;
        
        var reader = new FileReader();
        reader.onload = (function(theFile){
            return function(e){
                var img = document.createElement('img');
                img.title = theFile.name;
                img.src = e.target.result;
                document.body.appendChild(img); //这里你想插哪插哪  
            }
        })(f);
        reader.readAsDataURL(f);
    }  
}

如果要一次上传多张图片，代码如下：

document.querySelector('#upfile').onchange = function () {
     var fileReader = new FileReader();
      fileReader.onload = function (e) {
          if (fileReader.readyState == FileReader.DONE) {
              var img = document.createElement('img');
              img.src = this.result;
              document.body.appendChild(img); //示例只是简单插入body
          }
      }
     //一次加载多个文件
     var i = 0, src = this.files;
     fileReader.readAsDataURL(src[i]);
     fileReader.onloadend = function () {
         i++;
         if (i < src.length) fileReader.readAsDataURL(src[i]);
     }
}