<div class="block-input" style="height: 90px">
<span><i class="red">*</i>上传图片:</span>
<div class="img-area" v-for="(img,index) in imgs" :key="index">
<img :src="img" style="width: 79px;height: 70px;" @click="showBig(img)"/>
<a class="remove-log" @click="removeLog(img)">x</a>
</div> <input type="file" id="pfile" accept="image/gif, image/jpeg,image/png, image/bmp" @change="getPhoto" style="display: none"/>
<button @click="getFile" v-show="isShowBtn" class="button">报表图片</button>
</div>
<div v-if="showImg" class="showImg-box">
<div class="showImg-mask" @click="hiddenImg"></div>
<img :src="chooseImg" style="max-height:400px;max-width: 80%;"/>
</div>
getFile () {
document.getElementById('pfile').click()
},
getPhoto () {
let pfile = document.getElementById('pfile')
let f = pfile.files[0]
let imgVal = pfile.value
let fileName = imgVal.substring(imgVal.lastIndexOf('.') + 1).toLowerCase()
if (fileName !== 'jpg' && fileName !== 'jpeg' && fileName !== 'PNG' && fileName !== 'png' && fileName !== 'bmp' && fileName !== 'gif') {
alert('不支持该格式的文件!')
return false
}
if (f.size > 1024 * 1024 * 10) {
alert('上传图片大小不能大于10M!')
return false
}
var fReader = new FileReader()
fReader.readAsDataURL(f)
fReader.onload = (e) => {
let res = fReader.result
this.imgs.push(res)
if (this.imgs.length === 1) {
this.isShowBtn = false
}
}
},
removeLog (img) {
this.imgs.pop()
let upimgs = this.imgs
for (let i = 0; i < upimgs.length; i++) {
if (img === upimgs[i]) {
upimgs.splice(i, 1)
return
}
}
if (upimgs.length < 1) {
this.isShowBtn = true
this.imgs = []
}
},
showBig (img) {
this.chooseImg = img
this.showImg = true
},
hiddenImg () {
this.showImg = false
},

js 上传图片的更多相关文章

  1. c#使用js上传图片

    前几天朋友说用js上传图片过去遇到点问题,于是自己也想写一个demo这里就把自己挖的坑填了. 话不多说上代码 前台就一个file控件加按钮 <!DOCTYPE html> <html ...

  2. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  3. js上传图片前预览方法(支持预览多个图片)

    运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...

  4. Node.js 上传图片并保存

    Node.js 上传图片并保存 依赖 package.json 文件 { "name": "demo", "version": " ...

  5. js 上传图片、压缩、旋转

    亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  6. 原生 js 上传图片

    js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...

  7. Js上传图片并生成缩略图

    Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...

  8. js上传图片到七牛云存储

    项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...

  9. js 上传图片,用户自定义截取图片大小

    js 上传图片,用户自定义截取图片大小 js 组件

  10. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

随机推荐

  1. 【Linux学习】Linux文件系统2—linux常用目录结构、绝对路径、相对路径

    Linux文件系统2-linux常用目录结构.绝对路径.相对路径 一. 常见目录结构总结 Linux目录结构就是"树形结构",常见的目录结构: /bin  系统需要的命令位于此目录 ...

  2. iOS11 与 iPhone X适配的那些坑(持更中...)

    目录 问题列表 1.适配iPhoneX 屏幕原则 2.适配过程一些常量的设置 3..iPhone X 上运行有黑色区域问题 4.iOS11导航栏适配 5.出现UIScrollview 漂移问题(基本都 ...

  3. bzoj3771: Triple(容斥+生成函数+FFT)

    传送门 咳咳忘了容斥了-- 设\(A(x)\)为斧头的生成函数,其中第\(x^i\)项的系数为价值为\(i\)的斧头个数,那么\(A(x)+A^2(x)+A^3(x)\)就是答案(于是信心满满的打了一 ...

  4. 海思3559A QT 5.12移植(带webengine 和 opengl es)

    海思SDK版本:Hi3559AV100_SDK_V2.0.1.0 编译器版本:aarch64-himix100-linux-gcc 6.3.0(这个版本有点小问题,使用前需要先清除本地化设置) $ e ...

  5. nmon性能监控工具学习

    nmon在AIX环境上,是一款很出名的系统性能监控工具,其实它除了可以运行在AIX,还可以在Linux环境下编译.使用. 源码下载地址: http://nmon.sourceforge.net/pmw ...

  6. JAVA团队开发手册 - 3. 开发流程

    开发流程 对于一个项目,最大的问题就是如何拆解为任务,分配到合适的人手里,并在有限的时间内完成它. 就像做建筑工程一样,其实做IT也是可以量化的,可能有的人砌砖砌得慢一些,有的人快一些. 但是我们把整 ...

  7. JDBC | 查询表数据行数

      两种方法: 1. "select * from userinfo" 利用ResultSet的last和getRow方法来获得ResultSet的总行数,适用于在查询数据的同时统 ...

  8. OSPF-1-OSPF的数据库交换(5)

    三.LAN中的指定路由器   没有DR概念的话,共享同一条数据链路的一对路由器会形成完整的邻接关系,每对路由器之间都会直接交换它们的LSDB,假设在一个只有6台路由器的LAN中,其中没有DR,那么就会 ...

  9. asyncio模块

    asyncio模块   这是官网也非常推荐的一个实现高并发的一个模块,python也是在python 3.4中引入了协程的概念. asyncio 是干什么的? 异步网络操作 并发 协程 python3 ...

  10. hdu6314( 2018 Multi-University Training Contest 2)

    bryce1010模板 http://acm.hdu.edu.cn/showproblem.php?pid=6314 ----. 又是一个数学题! 这个题使用容斥原理解决的,现场看dls推公式. 我也 ...