图片的上传和预览的实现

旧城等待， 2022-10-10 12:48 311阅读 0赞

经常经常会遇到上传图片和预览已上传图片的功能，，，今天来实现一个

整体思路如下：

*  使用type=file类型的input元素实现图片的选择
 *  使用fileReader处理选择的图片
 *  新建元素img，将选择的图片作为新建元素img的src
 *  给img添加样式，实现预览效果

<input type="file" id="file-input" />
    <button id="yu-lan">预览</button>

var input = document.getElementById('file-input');
        var btn = document.getElementById('yu-lan');
        var file;
        input.onchange = function () { 
            file = input.files[0];
        }
        btn.onclick = function () { 
            var fileReader = new FileReader();
            fileReader.readAsDataURL(file);
            fileReader.onload = function (e) { 
                console.log(e, 1234)
                var img = document.createElement('img');
                img.src = e.target.result;
                document.body.appendChild(img)
            }
        }

![在这里插入图片描述][20210628150252741.png]  
![在这里插入图片描述][20210628150309336.png]

由于使用的是type=file的input元素，选择文件前后的默认效果是这样的，，，，看起来不是很好，，，，可以稍微的调整下

给input元素设置宽、高、并且透明度opaticy=0;,然后在input元素下层放一个“上传图片”、“上传文件”等等之类的图片、或者带样式的按钮，，实现input元素默认样式的修改

[20210628150252741.png]: /images/20221005/f9797095d43048b59dd3af9e1ad86e46.png
[20210628150309336.png]: /images/20221005/1a32258a4d1d43ca844934d94fbe22b7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

相关上传图片实现预览

![Image 1][]浏览器必须支持FileReader,先判断是否支持。监听type属性等于file的input的change（值改变）事件。使用F

Bertha 。/ 2023年10月16日 22:41/ 0 赞/ 70 阅读

相关 14.uniapp的图片上传和预览

<template> <view> <button type="primary" @click="chooseImg">上传图片</button>

朱雀/ 2022年11月18日 05:49/ 0 赞/ 389 阅读

相关图片的上传和预览的实现

经常经常会遇到上传图片和预览已上传图片的功能，，，今天来实现一个整体思路如下：使用type=file类型的input元素实现图片的选择使用fileRead

旧城等待，/ 2022年10月10日 12:48/ 0 赞/ 312 阅读

相关上传图片预览JS脚本 Input file图片预览的实现示例

需要一个用户上传头像预览的功能，因此写了一段上传图片预览JS脚本,Input file图片预览的实现，需要的朋友可以看看好东西要分享！在深圳做项目的时候，需要

快来打我*/ 2022年07月27日 12:00/ 0 赞/ 358 阅读

相关 js实现上传图片预览的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

深藏阁楼爱情的钟/ 2022年06月16日 07:11/ 0 赞/ 348 阅读

相关 jquery 实现图片上传预览

jquery 实现图片上传预览 1.如下代码就能实现： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

蔚落/ 2022年06月05日 01:57/ 0 赞/ 528 阅读

相关图片预览与上传

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

小鱼儿/ 2022年04月24日 10:50/ 0 赞/ 642 阅读

相关多图片上传预览的实现

闲话日常：有时候在项目中，可能会用到图片上传的预览功能，而之前总是在网上找相关的插件进行实现，但是有的时候发现别人写好的插件，有时候会影响到自身布局的样式，偶尔还很难进

比眉伴天荒/ 2021年11月17日 06:06/ 0 赞/ 605 阅读

相关 uniapp——图片的上传和预览

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

待我称王封你为后i/ 2021年07月25日 18:10/ 0 赞/ 933 阅读

相关 uniapp - 图片的上传和预览

图片的上传和预览 uni.chooseImage(OBJECT) uni.previewImage(OBJECT) 一个图片上传和预览的 demo 实例

红太狼/ 2021年07月25日 14:47/ 0 赞/ 1460 阅读