本地图片预览+blob使用

最新推荐文章于 2024-05-31 15:00:13 发布

程序十八大

最新推荐文章于 2024-05-31 15:00:13 发布

阅读量1.3w

点赞数 4

分类专栏： 2017-12 html 文章标签： html5 本地预览

本文链接：https://blog.csdn.net/pow8368684/article/details/78859921

版权

说明：做要用到file标签和 html5 Blob对象

方法1：使用file标签

<label>请选择一个文件：</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick = "readAsDataURL()"/>

// 将文件以Data URL形式进行读入页面
    function readAsDataURL(){
        // 检查是否为图像类型
        var simpleFile = document.getElementById("file").files[0];
        if(!/image\/\w+/.test(simpleFile.type)) {
            alert("请确保文件类型为图像类型");
            return false;
        }
        var reader = new FileReader();
        // 将文件以Data URL形式进行读入页面
        reader.readAsDataURL(simpleFile);
        reader.onload = function(e){
            console.log(this.result);
            result.innerHTML = '<img sr