H5 readfile 多图片预览
2024-10-20 06:38:40
/**
* 多图片前端预览
* @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]);
}
最新文章
- linux 7z 命令编译安装
- AndroidStudio-使用Translations Editor
- poj2429 GCD &; LCM Inverse
- lighttpd+fastcgi模块分析
- Quartz 第二课 Jobs and Triggers(官方文档翻译)
- MD5加密算法原理及实现
- android ListView的上部下拉刷新下部点击加载更多具体实现及拓展
- win7下文件名不能定义为con(任何文件格式)
- 为什么要在onNewIntent的时候要显示的去调用setIntent
- React Native学习(六)—— 轮播图
- CentOS6.5 64位下安装部署Ansible
- 《java核心技术36讲》学习笔记-------杨晓峰(极客时间)
- 二分查找c++实现
- vue的 v-for 循环中图片加载路径问题
- Spark机器学习——模型选择与参数调优之交叉验证
- Eclipse中在xml文件中,ctrl+左键的快捷键,点击class定位,不生效
- 一位大牛整理的Python资源
- maven 的聚合
- 3504. [CQOI2014]危桥【最大流】
- K-medodis聚类算法MATLAB