<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. vsftpd总结

    1 vsftps配置文件详解 (1)/user/sbin/vsftpd  主程序 (2)/etc/rc.d/init.d/vsftpd 启动脚本 (3)/etc/pam.d/vsftpd (file= ...

  2. 【网络爬虫】【java】微博爬虫(一):小试牛刀——网易微博爬虫(自定义关键字爬取微博数据)(附软件源码)

    一.写在前面 (本专栏分为"java版微博爬虫"和"python版网络爬虫"两个项目,系列里所有文章将基于这两个项目讲解,项目完整源码已经整理到我的Github ...

  3. 服务器无法在发送 HTTP 标头之后修改 cookie

    隔三差五就碰到VS报错: System.Web.HttpException:“服务器无法在发送 HTTP 标头之后修改 cookie.” 解决后过几天又忘记了. 原因是: 程序为每个页面在config ...

  4. C# 生成随机阿拉伯数字,或字符串

    //TextBox1.Text = TongYong.SuiJi.SuiJiMingZi(2); public class SuiJi { //TextBox1.Text = TongYong.Sui ...

  5. 线程通讯-Condition

    Account类 package com.thread.communication.condition; import java.util.concurrent.TimeUnit; import ja ...

  6. python接口自动化(三十七)-封装与调用--读取excel 数据(详解)

    简介 在进行软件接口测试或设计自动化测试框架时,一个不比可避免的过程就是: 参数化,在利用python进行自动化测试开发时,通常会使用excel来做数据管理,利用xlrd.xlwt开源包来读写exce ...

  7. 2013 Noip提高组 Day2

    3288积木大赛 正文 题目描述 春春幼儿园举办了一年一度的“积木大赛”.今年比赛的内容是搭建一座宽度为n的大厦,大厦可以看成由n块宽度为1的积木组成,第i块积木的最终高度需要是hi. 在搭建开始之前 ...

  8. DB2 - 编目的解释

    编目(Catalog),是在本地或远程建立客户端到服务器的数据库连接的过程.其目的在于获取编目信息,即生成用来访问数据库的目录.系统数据库目录包含一个列表和指针,通过目录可以使 DB2 能够找到已知的 ...

  9. bzoj1130:[POI2008]POD Subdivision of Kingdom

    传送门 看到数据范围这么小,不由得算了一下暴力复杂度,算出来情况一共只有1e7,不多,再乘上暴力判断的复杂度,好像T了,判断的话位运算可以方便解决 但是我写的优化似乎比较渣,还留了个log,但是还是n ...

  10. JTextArea设置滚动条

    应将JTextArea置于JScrollPanel中 若要使只有垂直滚动条而没有水平滚动条,使用JTextArea.setLineWrap(true),自动换行.   以下摘自[url]http:// ...