js实现上传图片并显示的两种实现方式(无需上传到服务器再显示)

原创于 2018-04-09 11:42:13 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了两种JavaScript实现图片上传并立即在页面上显示的方法，无需将图片先上传到服务器。这两种方法对于创建具有实时预览功能的图片上传组件非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：

<input type='file' id='chooseFile'>
<img src='' id='picToCheck'/>
document
        .querySelector('#chooseFile')
        .addEventListener('change', function(){
            //当没选中图片时，清除预览
            if(this.files.length === 0){
                document.querySelector('#picToCheck').src = '';
                return;
            }

            //实例化一个FileReader
            var reader = new FileReader();

            reader.onload = function (e) {
                //当reader加载时，把图片的内容赋值给
                document.querySelector('#picToCheck').src = e.target.result;
            };

            //读取选中的图片，并转换成dataURL格式
            reader.readAsDataURL(this.files[0]);
        }, false);

方法二：

preload.src = getObjectURL(files[0]);
function getObjectURL(file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozila(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }