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]); }