Javascript上传图片转base64并预览，拿走不谢！

js中的FileReader结合input:file可以很方便的读取本地文件。不过要知道FileReader读取文件采用的是异步机制。

html:

 <!--accept只能与file配合使用。它可以限制上传的文件类型
    当然你也可以写成 accept="image/*"-->
 <div>
     <input type="file" id="myimg"
            onchange="imgChange(this)"
            accept="image/png,image/gif,image/jpeg"/>
     <img width="300px"  src="" alt="">
 </div>

js:

function imgChange(img) {
    // 生成一个文件读取的对象
    var reader = new FileReader();
    reader.onload = function (ev) {
        // base64码
        var imgFile =ev.target.result;//或e.target都是一样的
        document.querySelector("img").src= ev.target.result;
    }
    //发起异步读取文件请求，读取结果为data:url的字符串形式，
    reader.readAsDataURL(img.files[0]);
}