专栏首页web秀10行JavaScript代码完成图片的上传预览

10行JavaScript代码完成图片的上传预览

前言

冬至,希望大家都可以有饺子和汤圆吃,主要是能和自己家人爱人一起吃个饭。 下面进入主题,用原生JS给撸个图片上传,预览的小示例,希望对大家有所帮助。

示例

function fChange() {
  let file = document.getElementById('file');
  // 输出已经选择图片名字
  console.log(file.value);
  // 输出已经选择的图片对象
  console.log(file.files[0]);
}
...
<input type="file" id="file" onchange="fChange()">

我们怎么把图片对象渲染到页面了?达到可以预览的目的?

// file 转 blob对象
let bold = window.URL.createObjectURL(file.files[0]);
console.log('bold==>'+bold);

let boldImg = document.getElementById('bold');
boldImg.src = bold;

// file 转 base64
let base64Img = document.getElementById('base64');
var reader = new FileReader();
reader.readAsDataURL(file.files[0]);
reader.onload = function (e) {
  console.log('base64==>'+this.result);
  base64Img.src = this.result;
}

这样看blob对象和base64都可以预览图片,但是blob对象仅仅是当次缓存,如果刷新,你重新把之前转的字符串放到src是不可以预览的,当时base64是可以的。所以存库的时候不仅可以图片路径,还可以直接存base64(base64很占用数据库空间,文件越大,base64字符串越大)

优化

下面我们对上面示例做优化,可以上传多张图片并预览,美化界面。

<div id="img-pre">
</div>
<div id="add-pic">
    <input type="file" id="up-file" onchange="fChange()">
</div>

css样式

#add-pic{
  width: 100px;
  height: 100px;
  background: url('./add-pic.png')
}
#add-pic input{
  width: 100%;
  height: 100%;
  display: none;
}
#img-pre:after{
  display: block;
  content: '';
  clear: both;
}
#img-pre img{
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
}

javascript

let addPic = document.getElementById('add-pic'), upFile = document.getElementById('up-file');
// 监听图片点击,从而触发input file的点击事件
addPic.addEventListener('click', function(){
  upFile.click();
})
function fChange() {
    let file = document.getElementById('up-file');
    let imgPre = document.getElementById('img-pre');

    // file 转 blob对象
    let bold = window.URL.createObjectURL(file.files[0]);

    // 创建img元素,并添加到img-pre元素里
    var img = document.createElement("img");
    img.setAttribute("src", bold);
    imgPre.appendChild(img);
}

主要是通过css隐藏掉input file选择文件按钮,然后用+号图片点击事件来触发input file的点击事件,达到能选择图片的目的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web开发中该用 em 还是 rem 呢?

    em 和 rem这种相对长度单位进行页面排版是web开发中的最好的选择。在页面排版中较好应用em 和 rem,根据设备尺寸缩放显示元素的大小。这就使得组件在不同...

    Javanx
  • CSS利用mask 实现图片的斜线拼接

    发现,上面这张图是两个美女拼接在一起的,看中间的斜线。 但是呢,刚接到这个需求的时候,开发是抓狂的——第一反应就是用canvas画图,这得多累啊,只是要显示张...

    Javanx
  • CSS3线性、径向渐变、旋转、缩放、动画实现王者荣耀匹配人员加载页面

    日子总是像从指尖流过的细沙,在不经意间悄然的滑落。转眼2019年第一季度已经过去了,提前祝大家愚人节快乐,当心被人愚弄哦(就算被愚弄也不要生气啦)。

    Javanx
  • 用好 Require,check,assert,写好 Kotlin 代码

    在编码的时候,我们需要做很多的检测判断,比如某个变量是否为null,某个成员属性是否为true,执行某个操作结果是否成功。比如像下面的这段代码

    技术小黑屋
  • upload-labs上传绕过(下)

    trim函数 根据我们的测试,它是将指定的字符串移除,那么在这里我们就可以上传.pphphp即可绕过

    字节脉搏实验室
  • python -服务器与客户端断电续传程序详细介绍

    可以先新建好这三个文件夹,也可以用os.path.exists(path)判断路径来生成

    小小咸鱼YwY
  • 《笨办法学Python》 第17课手记

    《笨办法学Python》 第17课手记 本节内容是前几节内容的复习和综合,此外引入了exists函数。 原代码如下: from sys import argv ...

    Steve Wang
  • Python入门基础教程-文件

    大多数情况下程序中的数据会来自于外部,包括数据库导出的规整化数据、爬虫获取的大量不规则数据、以及其他各企业内部数据。总之,要想对数据进行处理、你得先学会数据的读...

    知秋小一
  • 通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    我们上一篇《基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)》主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的...

    HT for Web
  • 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(二)

    HT_hightopo

扫码关注云+社区

领取腾讯云代金券