html file 上传后如何在旁边显示上传的图片

<input type="file" id="file" name=""  />


<div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
                <img src="__PUBLIC__/images/tu.png" />    
                </div>

上传图片后如何实时 预览

阅读 19.9k
评论
    5 个回答
    • 26.6k

    谢邀吧,我尽量把要说的写简单一点:

    首先,我假设你有一个标签input用来选择图片,还有一个img标签用来预览,html大致如下:

    <input id="imgPicker" type="file" />
    <img id="preview" />

    然后,我们需要监听input标签的change事件,用来观察用户是否选中了图片,并且图片是什么,代码大致如下:

    document
        .querySelector('#imgPicker')
        .addEventListener('change', function(){
            //当没选中图片时,清除预览
            if(this.files.length === 0){
                document.querySelector('#preview').src = '';
                return;
            }
            
            //实例化一个FileReader
            var reader = new FileReader();
    
            reader.onload = function (e) {
                //当reader加载时,把图片的内容赋值给
                document.querySelector('#preview').src = e.target.result;
            };
    
        //读取选中的图片,并转换成dataURL格式
        reader.readAsDataURL(this.files[0]);
        }, false);

      使用HTML5的FileReader来读取图片,将读取结果直接替换到img的src属性上即可。直接上代码了,应该比较好懂:

      input.onchange = function () {
          var imgFile = input.files[0];
          var fr = new FileReader();
      
          fr.onload = function () {
              img.src = fr.result;
          };
          // 注意要先设置回调再读取文件
          fr.readAsDaraURL(imgFile);
      };

      注意要先设置回调再读取文件。重要的事情说两遍。

        其实楼上已经给出了方案。

        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
        </head>
        
        <body>
            <input type="file" id="file" name="" />
            <div id="image" style="width:390px;height:280px; background:#CCCCCC; float:left;">
                <img src="__PUBLIC__/images/tu.png" />
            </div>
        </body>
        <script>
        document.getElementById('file').onchange = function() {
            var imgFile = this.files[0];
            var fr = new FileReader();
            fr.onload = function() {
                document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
            };
            fr.readAsDataURL(imgFile);
        };
        </script>
        
        </html>
        
          • 2.2k

          告诉你个很简单的方法,不需要上传到服务器,直接浏览器选择图片就可以预览,视频也行。
          那就是:

          var src=window.URL.createObjectURL(blob)//这里传一个文件对象 例如:file.files[0]
          img.src=src;

          window.URL.createObjectURL 这个函数会创建一个临时的地址,把地址设置到src上就行了。

            • 1.4k

            推荐一个:

            JS兼容各个浏览器的本地图片上传即时预览效果

            不同浏览器对HTML5的支持度不一样,如果需要考虑到向下兼容,可以参考这篇文章
            另外还有一种解决方案:即图片上传完成之后,服务器返回上传的图片URL,然后创建img标签即可

              撰写回答

              登录后参与交流、获取后续更新提醒