【javascript】实现上传预览图片功能

浏览器在上传图片之后，我们能够获取到图片的file对象，现在的问题就是让这个图片在浏览器里面显示出来。

思路： file对象转换成base64字符串，然后赋值给img的src即可。 Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用 ASCII 字符串的格式表示出来。

我们将file对象转换为base64字符串，需要通过FileReader对象的readAsDataURL来做。

HTML代码

    <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
    <button id="fileSelect">Select some filesbutton>
    <div id="preview"> div>

JS代码

    // TIP: 通过ID直接访问该dom元素

    // 1,  绑定监听事件
    fileSelect.addEventListener("click", function (e) {
      if (fileElem) {
        fileElem.click();
      }
    }, false);
  



    // 2, 处理获取到的文件对象
    function handleFiles(files) {
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /^image\//;
        
        if (!imageType.test(file.type)) {
          continue;
        }

        // 动态生成一个IMG标签
        var img = document.createElement("img");
        img.classList.add("obj");
        // img.file = file; // 不是必须的
        img.style.width = '200px';
        img.style.height = '100px';
        // 假设"preview"就是用来显示内容的div
        preview.appendChild(img); 
        

        // key codes 将file对象转换为base64编码，然后赋值到img的src属性
        var reader = new FileReader();
        // 将file对象转换为base64
        reader.readAsDataURL(file);  
        // 闭包
        reader.onload = (function(aImg) { return function(e) { 
            // 打印 e.target.result
            aImg.src = e.target.result; 
          };
        })(img);
      }
    }