文件上传之图片预览

　　　　 window.URL = window.URL || window.webkitURL;
 
        var fileSelect = document.getElementById("fileSelect"), fileElem = document.getElementById("fileElem"), fileList = document.getElementById("fileList");
 
        fileSelect.addEventListener("click", function(e) {
            if (fileElem) {
             
             // 单击fileSelect调用input type=‘file‘的单击事件就能弹出文件选择框，是不是很爽？
             // 低版本浏览器必须单击input type=‘file‘才能弹出文件选择框，我在文件上传之普通上传的博文中介绍过解决方案
                fileElem.click();
            }
           
            // 我们的A标签的href属性值为"#"，需要阻止浏览器的默认行为
            e.preventDefault();
        }, false);
 
        function handleFiles(files) {
            if (!files.length) {
                fileList.innerHTML = "<p>No files selected!</p>";
            } else {
                var list = document.createElement("ul");
                for (var i = 0; i < files.length; i++) {
                    var li = document.createElement("li");
                    list.appendChild(li);
 
                    var img = document.createElement("img");
                   
                    // 生成文件标示符，并将标示符指向img的src属性
                    img.src = window.URL.createObjectURL(files[i]);
                    img.height = 200;
                    img.onload = function(e) {
                     
                      // 释放文件标示符占用的内存
                        window.URL.revokeObjectURL(this.src);
                    }
                    li.appendChild(img);
 
                    var info = document.createElement("span");
                    info.innerHTML = files[i].name + ": " + files[i].size + " bytes" + ": " + files[i].type;
                    li.appendChild(info);
                }
                fileList.appendChild(list);
            }
        }

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files);this.value=‘‘;">
<a href="#" id="fileSelect">Select some files</a> 
<div id="preview"></div>

　　　　function handleFiles(files) {
            var previewEle = document.getElementById("preview");
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var imageType = /image.*/;
 
                if (!file.type.match(imageType)) {
                    continue;
                }
 
                var img = document.createElement("img");
                img.classList.add("obj");
                img.file = file;
                img.width = ‘300‘;
 
                previewEle.appendChild(img);
 
                var reader = new FileReader();
                reader.onload = (function(aImg) {
                    return function(e) {
                        aImg.src = e.target.result;
                    };
                })(img);
                reader.readAsDataURL(file);
            }
        }