js 上传图片
<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 上传图片的更多相关文章
- c#使用js上传图片
前几天朋友说用js上传图片过去遇到点问题,于是自己也想写一个demo这里就把自己挖的坑填了. 话不多说上代码 前台就一个file控件加按钮 <!DOCTYPE html> <html ...
- JS 上传图片 + 预览功能(一)
JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...
- js上传图片前预览方法(支持预览多个图片)
运用js实现上传图片前的预览(支持多张图片),实现的例子如下: 1.源码例子: 1)Js脚本页面 <!doctype html> <html> <head> < ...
- Node.js 上传图片并保存
Node.js 上传图片并保存 依赖 package.json 文件 { "name": "demo", "version": " ...
- js 上传图片、压缩、旋转
亲测 <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
- 原生 js 上传图片
js <!doctype html> <html> <head> <meta charset="utf-8"> <title& ...
- Js上传图片并生成缩略图
Js上传图片并显示缩略图的流程为 Js选择文件->Jquery上传图片->服务器接收图片流->存储图片->返回结果到Js端->显示缩略图 本文上传图片所用的Js库是aja ...
- js上传图片到七牛云存储
项目开发过程中遇到一个需求,运营人员需要上传图片到七牛云,最开始的做法是,后台对接七牛,然后出一个接口,前端调用接口,先将图片传到后台,然后后台再上传七牛云,用的过程中发现,图片小的情况下还好,图片一 ...
- js 上传图片,用户自定义截取图片大小
js 上传图片,用户自定义截取图片大小 js 组件
- js上传图片及预览功能
详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...
随机推荐
- JAVA基础--JAVA 集合框架(泛型、file类)16
一.集合总结 集合:Collection体系.Map体系. Collection体系:单列集合的共性操作规则. List:列表,可以重复,有下标,拥有特有的迭代器ListIterator. Array ...
- Java判断一个数是不是快乐数
快乐数的定义: 快乐数(happy number)有以下的特性: 在给定的进位制下,该数字所有数位(digits)的平方和,得到的新数再次求所有数位的平方和,如此重复进行,最终结果必为1. 以十进制为 ...
- sql #与$的区别
#将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by “111”, 如果传入的值是i ...
- RXSwift01
//创建 Observable 序列 func createObservable(){ /* let observable = Observable<Int>.just(5) let ob ...
- Unity3D调用摄像头,画面为翻转的问题
http://blog.csdn.net/a117653909/article/details/16119907 Unity3D中新建一个工程,加一个Plane,新建一个C# 脚本,调用摄像头,不过显 ...
- 测试 | Mock object
实例: 一个简单的图书管理系统包括三个类: Book提供了书籍的定义 BookService提供了有关书籍借阅和归还的服务 BookMananger查找书籍并把对书籍状态的更改更新到数据库中 目前,B ...
- IP服务-5-网络时间协议
NTP版本3(RFC1305)允许IP主机向一个通用的时钟源同步它们的日期和时间. 从设计上来说,大多数路由器和交换机都使用NTP客户端模式,根据NTP服务器所提供的时间来调整自己的时钟.NTP定义了 ...
- 洛谷 P2260 [清华集训2012]模积和 || bzoj2956
https://www.lydsy.com/JudgeOnline/problem.php?id=2956 https://www.luogu.org/problemnew/show/P2260 暴力 ...
- typedef与复杂声明
参考 [1] http://www.cnblogs.com/bakari/archive/2012/08/28/2659889.html [2]<C专家编程> [3 ]http://www ...
- 关于如何在其他包中写controller和简单介绍@SpringBootApplication
本文参考博客:https://blog.csdn.net/u013473691/article/details/52353923 关于@Configuration和@Bean参考博客:https:// ...