H5 readfile 多图片预览
/**
* 多图片前端预览
* @author Tiac
*/
function preView(_this, offset){
let max_nums = 10;//单位 s
let max_size = 2;//单位 M
let pic_div = '.pic-div'; if( document.querySelectorAll(pic_div+' img').length >= max_nums){
return alert('最多可上传'+max_nums+'张图片');
} if(_this.files[offset].size > (max_size*1024*1024)){
alert('图片 '+_this.files[offset].name+' 超过限制('+max_size+' mb)');
if (_this.files[offset+1]) {
return preView(_this, ++offset);
} else {
return false;
}
} let reader = new FileReader();
reader.onload = function(e) {
let img = document.createElement('img');
img.src = e.target.result;
img.title = '点击移除图片';
img.className = 'img-box';
document.querySelector(pic_div).appendChild(img);
img.addEventListener('click', function(){
this.parentNode.removeChild(this);
}); if(offset<_this.files.length-1){
preView(_this, ++offset);
}
}
reader.readAsDataURL(_this.files[offset]);
}
H5 readfile 多图片预览的更多相关文章
- H5实现多图片预览上传,可点击可拖拽控件介绍
版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...
- h5的图片预览
h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...
- 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器
前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
- H5图片预览功能
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 移动端Vue图片获取,压缩,预览组件-upload-img(H5+获取照片,压缩,预览)
组件示例图 组件代码 upload_img.vue <div id="uploadImg"> <div class="upload_image_box& ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- 浅谈js本地图片预览
最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...
- JS魔法堂之实战:纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
随机推荐
- u-boot mkconfig文件分析
#!/bin/sh -e #遇到非0返回 就退出脚本 # Script to create header files and links to configure # U-Boot for a spe ...
- 在Eclipse中给JRE-Library添加本地Javadoc
Eclipse中的JRE-Library的Javadoc默认是一个URL,指向oracle的一个web-page,那你在离线的时候就无法使用了,为了解决这个问题,你可以从oracle下载JDK-Spe ...
- 一款纯css3实现的超炫动画背画特效
之前为大家介绍了很多款由纯css3实现的特效.今天要再给大家带来一款纯css3实现的超炫动画背画特效.代码非常简单,没有引用任何其它js代码.css代码也不多.效果非常炫.一起看下效果图: 在线预览 ...
- [log]利用logrotate对Linux log进行管理
转自:http://feikiss.iteye.com/blog/1402181 https://linux.cn/article-4126-1.html Syslog-ng服务是Linux系统中重要 ...
- 细数JDK里的设计模式<转>
这也是篇老文了,相信很多人也看过.前面那些废话就不翻译了,直接切入正题吧~ 结构型模式: 适配器模式: 用来把一个接口转化成另一个接口. java.util.Arrays#asList() javax ...
- linux异步通知
简述 linux下异步方式有两种:异步通知和异步IO(AIO),aio请参考:linux异步IO--aio 异步通知的含义是:一旦设备就绪,则主动通知应用程序,这样应用程序就不需要查询设备状态,准确称 ...
- [Django学习]上传图片
上传图片 当Django在处理文件上传的时候,文件数据被保存在request.FILES FILES中的每个键为<input type="file" name="& ...
- 【DataStructure】Linked Data Structures
Arrayss work well for unordered sequences, and even for ordered squences if they don't change much. ...
- 轻量级ORM框架Dapper应用五:使用Dapper实现Join操作
在这篇文章中,讲解如何使用Dapper使用Inner join的操作 1.新创建两张表:Users表和Product表 Users表定义如下: CREATE TABLE [dbo].[Users]( ...
- R语言进阶之4:数据整形(reshape)
一.通过重新构建数据进行整形 数据整形最直接的思路就把数据全部向量化,然后按要求用向量构建其他类型的数据.这样是不是会产生大量的中间变量.占用大量内存?没错.R语言的任何函数(包括赋值)操作都会有同样 ...