vue.js图片批量上传插件
js代码
<script src="js/vue2.2.2.js"></script> <script> // import up from './src/components/Hello' var app = new Vue({ el: '#app', data () { return { imgList: [], size: 0 } }, methods: { fileClick(){ document.getElementById('upload_file').click() }, fileChange(el){ if (!el.target.files[0].size) return; this.fileList(el.target.files); el.target.value = '' }, fileList(files){ for (let i = 0; i < files.length; i++) { this.fileAdd(files[i]); } }, fileAdd(file){ this.size = this.size + file.size;//总大小 let reader = new FileReader(); reader.vue = this; reader.readAsDataURL(file); reader.onload = function () { file.src = this.result; this.vue.imgList.push({ file }); } }, fileDel(index){ this.size = this.size - this.imgList[index].file.size;//总大小 this.imgList.splice(index, 1); }, bytesToSize(bytes){ if (bytes === 0) return '0 B'; let k = 1000, // or 1024 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; }, dragenter(el){ el.stopPropagation(); el.preventDefault(); }, dragover(el){ el.stopPropagation(); el.preventDefault(); }, drop(el){ el.stopPropagation(); el.preventDefault(); this.fileList(el.dataTransfer.files); } } }) </script>
免责声明
本站所有资源均由网友贡献或各大下载网站转载。请自行检查软件的完整性!本站所有资源仅供学习参考。请不要将它们用于商业目的。否则,一切后果由您负责!如有侵权,请联系我们删除。联系方式:admin@php.cn
相关文章

15 Dec 2024
理解矢量及其独特的特征斯科特·迈耶斯的“有效的STL”强调了避免矢量由于......

11 Mar 2025
本文详细介绍了ThinkPHP的配置系统,重点介绍其功能,有效的用法和可扩展性。 它涵盖配置文件格式(PHP数组和XML),特定环境特定的覆盖(使用环境变量)和ADVA

22 Oct 2024
这项研究展示了 Python 的 SciPy 库(特别是其 scipy.signal.find_peaks 函数)在识别数据峰值方面的能力。重点放在突出参数上,它可以有效区分主峰和非峰


热工具

jQuery+Html5实现唯美表白动画代码
jQuery+Html5实现唯美表白动画代码,动画效果很棒,程序员表白必备!

情侣浪漫表白js特效代码
情侣浪漫表白js特效代码,这样的特效,可以用在婚纱摄影的网站上,也可以放在个人网站中,也还一个不错的特效,php中文网推荐下载!

简单js恋爱表白神器
简单原生js恋爱表白神器

碉堡的html5粒子动画表白特效
碉堡的html5粒子动画表白特效代码,动画特效文字可以在代码里面进行更改,大家可以做个页面,大家可以自定义文字的输入是应该是非常受欢迎的,此HTML5特效非常美的。

jQuery响应式后台登录界面模板
jQuery响应式后台登录界面模板html源码,登录页面通过jquery来验证表单,判断用户名和密码是否符合要求,通常登录页面在企业网站或者商城网站都是必须要用到的页面,响应式的后台页面,当浏览器放大或者缩小,背景会根据浏览器来调整图片的大小!php中文网推荐下载!

热门文章
两个点博物馆:邦格荒地地点指南
28 Feb 2025
手游攻略
击败分裂小说需要多长时间?
07 Mar 2025
手游攻略
仓库:如何复兴队友
04 Mar 2025
手游攻略
Hello Kitty Island冒险:如何获得巨型种子
05 Mar 2025
手游攻略
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?
04 Mar 2025
html教程