/**
* 多图片前端预览
* @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 多图片预览的更多相关文章

  1. H5实现多图片预览上传,可点击可拖拽控件介绍

    版权声明:欢迎转载,请注明出处:http://blog.csdn.net/weixin_36380516 在做图片上传时发现一个蛮好用的控件,支持多张图片同时上传,可以点击选择图片,也可以将图片拖拽到 ...

  2. h5的图片预览

    h5的图片预览是个好东西,不需要保存到后台就能预览图片 代码也很短 <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. 移动端 H5 拍照 从手机选择图片,移动端预览,图片压缩,图片预览,再上传服务器

    前言:最近公司的项目在做全网营销,要做非微信浏览器的wap 站 的改版,其中涉及到的一点技术就是采用H5 选择手机相册中的图片,或者拍照,再将获取的图片进行压缩之后上传. 这个功能模块主要有这5点比较 ...

  4. H5图片预览、压缩、上传

    目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...

  5. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 移动端Vue图片获取,压缩,预览组件-upload-img(H5+获取照片,压缩,预览)

    组件示例图 组件代码 upload_img.vue <div id="uploadImg"> <div class="upload_image_box& ...

  7. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  8. 浅谈js本地图片预览

    最近在工作中遇到一个问题,就是实现一个反馈页面,这个反馈页面的元素有反馈主题.反馈类型.反馈内容.反馈人联系电话以及反馈图片.前端将这些反馈的元素POST给后台提供的接口:实现这个工作的步骤就是:页面 ...

  9. JS魔法堂之实战:纯前端的图片预览

    一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...

随机推荐

  1. Spring Boot干货系列:(五)开发Web应用JSP篇

    Spring Boot干货系列:(五)开发Web应用JSP篇 原创 2017-04-05 嘟嘟MD 嘟爷java超神学堂 前言 上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天 ...

  2. 随机梯度下降 Stochastic gradient descent

    梯度下降法先随机给出参数的一组值,然后更新参数,使每次更新后的结构都能够让损失函数变小,最终达到最小即可. 在梯度下降法中,目标函数其实可以看做是参数的函数,因为给出了样本输入和输出值后,目标函数就只 ...

  3. rpm信息查看

    rpm -qpi xxx.rpm #查看rpm包相关信息,一般有版本,build日期,功能描述,大小,公司等等 rpm -qpl xxx.rpm  #查看rpm包含安装的目录和文件 rpm -qpc ...

  4. GIS+=地理信息+行业+大数据——基于云环境流处理平台下的实时交通创新型app

    应用程序已经是近代的一个最重要的IT创新.应用程序是连接用户和数据之间的桥梁,提供即时訪问信息是最方便且呈现的方式也是easy理解的和令人惬意的. 然而,app开发人员.尤其是后端平台能力,一直在努力 ...

  5. udev规则以及编写

    主要内容: udev简介 如何配置和使用udev 如何编写udev规则 字符串替换和匹配 udev主要作用 编写udev规则实例 难点解析 1. udev简介 1.1 什么是udev? udev是Li ...

  6. POJ 1523 SPF 割点与桥的推断算法-Tarjan

    题目链接: POJ1523 题意: 问一个连通的网络中有多少个关节点,这些关节点分别能把网络分成几部分 题解: Tarjan 算法模板题 顺序遍历整个图,能够得到一棵生成树: 树边:可理解为在DFS过 ...

  7. R语言中字符串的拼接操作

    在R语言中 paste 是一个很有用的字符串处理函数,可以连接不同类型的变量及常量. 函数paste的一般使用格式为: paste(..., sep = " ", collapse ...

  8. .net开发遇到的一个问题

    之前项目有个entity是写在Entity层的,相关的配置项也写死在程序里了,而且还是个static的配置,后来有了新需求,上峰指示要从CMS读取配置内容,大概是要在BLL实现,BLL依赖IBLL的I ...

  9. 关于Unity中的Input输入事件

    截获鼠标,键盘的消息 监听事件我们都是在Update里面监听的. Unity的虚拟轴打开:Edit-->Project Settings-->Input,打开的各个Name就是双引号里面要 ...

  10. 关于Cocos2d-x中节点和精灵的关系以及初始化

    1.每一个对象类都有一个自己public的一个create函数(等价于CREATE_FUNC),和init函数. 2.create函数返回的是自身的类型,init函数是在ceate函数被调用的时候自动 ...