实现上传时预览图片

Posted guyuedashu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现上传时预览图片相关的知识,希望对你有一定的参考价值。

 

 主要使用的类

         js  new FileReader
         
         方法名                      参数                     描述
        abort                    none                中断读取
        readAsBinaryString        file                将文件读取为二进制码
        readAsDataURL            file                将文件读取为 DataURL
        readAsText                file, [encoding]    将文件读取为文本

代码

<input id="prepare" type="file" accept="" value="aaa" multiple="multiples" onchange="preparePic(this)"/>       

        function preparePic(obj)
        {
            var a = $(obj)[0]
            var b = obj.files
            
            console.log(obj);
            console.log(a.value);
            console.log(obj.files);
            
            var read = new FileReader();
//          read.readAsDataURL(obj.files[0]);//可以直接src
//          read.readAsBinaryString(obj.files[0]);
            read.readAsText(obj.files[0],"utf-8");//直接读取字符串
            read.onload = function(e){
                console.log("加载完成");
                console.log(e)
                var img = document.getElementById("pic");
//                img.src = e.target.result;
                $("#myPic").html(e.target.result)
            }
            
        }

 

以上是关于实现上传时预览图片的主要内容,如果未能解决你的问题,请参考以下文章

jquery实现上传图片及图片大小验证图片预览效果代码

9行代码实现图片上传和预览(自定义按钮上传)

react利用await/async实现批量上传图片可预览可限制上传图片数量

图片上传即时预览效果

9行代码实现图片上传和预览(自定义按钮上传)

nodejs实现本地上传图片并预览功能