通过FileReader预览上传图片

纵然是瞬间 提交于 2019-12-29 22:07:14

html:采用了layui框架样式,(可自己写):

js如下:

function getFileContent() {
    /*1.创建文件读取对象*/
    var reader = new FileReader();
    /*2.读取文件,获取DataURL*/
    var file = document.querySelector("#imageUrl").files;
    reader.readAsDataURL(file[0]);
    /*获取数据*/
    reader.onload = function () {
        //console.log(reader.result);
        /*展示*/
        document.querySelector("img").src = reader.result;
    }
    reader.onprogress = function (e) {
        var percent = e.loaded / e.total * 100 + "%";
        div.style.width = percent;
    }
}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!