/**
* 多图片前端预览
* @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. SQL Server,MySQL,Oracle三者的区别

    SQL Server,MySQL,Oracle三者的区别 2016-10-14 转自:SQL Server,MySQL,Oracle三者的区别 目录 1 Oracle.Sql Server.MySql ...

  2. u-boot中添加自定义命令

    1.u-boot命令机制u-boot中,每个命令都使用一个struct cmd_tbl_s结构体定义,该定义在include/command.h中实现:struct cmd_tbl_s{ char * ...

  3. ORM框架为什么不流行了

    程序员的逻辑是先写sql脚本,然后在编写对应的实体代码. orm框架的逻辑是先写实体代码,然后自动生成脚本,构建数据库,这和程序员的逻辑或习惯刚好相反,所以这类ORM框架渐渐的被淘汰了,例如:Hibe ...

  4. 纯css3实现的文字亮光特效

    今天给大家分享一款纯css3实现的文字亮光特效.这款特效文字上一道亮光逐渐扫过文字.效果非常漂亮.一起看下效果: 在线预览   源码下载 实现的代码. html代码: <span class=& ...

  5. [转]C#读取Word指定页的内容

    /// <summary> /// Word按页读取内容 /// </summary> /// <param name="page">页数< ...

  6. 【Unity/Kinect】Kinect实现UI控件的点击

    用体感来实现UI控件的点击,如点击按钮. 做法:用一个图片表示左手手掌,图片位置追踪左手手掌移动,当手掌位于UI控件的矩形内时,握拳表示点击该控件. using UnityEngine; using ...

  7. 【WPF】C#代码动态改变控件的样式

    需求:C#代码生成的一组按钮Button需要设置样式. 如果是在XAML中引入样式: <!-- 引入资源 --> <UserControl.Resources> <Res ...

  8. 轻量级ORM框架Dapper应用六:Dapper支持存储过程

    在Entity Framework中讲解了EF如何支持存储过程,同样,Dapper也支持存储过程,只需要在Query()方法的CommandType中标记使用的是存储过程就可以了.在Users表上面创 ...

  9. 说说$POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    $POST $_POST是我们最常用的获取POST数据的方式,它是以关联数组方式组织提交的数据,并对此进行编码处理,如urldecode,甚至编码转换,识别的数据类型是PHP默认识别的数据类型 app ...

  10. 免费 web api 接口大全

    下面的接口来自互联网,部分功能需要付费 查询手机 http://www.yodao.com/s-martresult-xml/search.s?type=mobile&q= 手机号码 查询 I ...