php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件，适用于手机端的图片上传代码，支持批量上传，拖到图片上传，显示文件数量和大小等功能
js代码
// 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);
}
}
})
申明：php中文网下载站匠心打造专业的IT资源下载站！一切资源免费，来源网络收集，请自行检测软件的完整性。交流QQ群：916808767
php图片批量上传插件下载,vue.js图片批量上传插件相关推荐
- 微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
标题 微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件 图片上传功能作为一个比较常见的功能,有时候需要在微信内置浏览器里打开,但是有些型号的手机会出现打不开的现象,点击 ...
- vue上传zip文件到服务器,vue.js zip文件上传
vue.js zip文件上传 内容精选 换一换 开发过程中,您有任何问题可以在github上提交issue,或者在华为云对象存储服务论坛中发帖求助.接口参考文档详细介绍了每个接口的参数和使用方法.在O ...
- 史上最全基于vue的图片裁剪vue-cropper使用
史上最全基于vue的图片裁剪vue-cropper使用 基于vue的图片裁剪vue-cropper 新的需求 vue-cropper官网 代码拷贝 最后 基于vue的图片裁剪vue-cropper 最 ...
- vue php 文件上传,使用vue.js和laravel上传文件
我尝试在vue.js和laravel中上传pdf文件,files_array是这样定义的:data(){ return { formData: new Form ({ files_array:'', ...
- 记录学习IDEA的遇到的问题--关于IDEA无法下载vue.js插件问题
在使用IDEA2.4版本下载vue.js过程中出现无法下载问题. 问题描述:连接jetbrains插件网超时导致无法下载 解决方法:1.打开Settings--> Appearance & ...
- vue和php网站下载,vue.js去哪下载
vue.js可以去vue官网下载,其下载链接为"vuejs.org/v2/guide/installation.html",然后用" 本教程操作环境:Windows7系统 ...
- vue.js中文官网下载vue.js失败了？
访问vue官网 https://v2.cn.vuejs.org/v2/guide/installation.html下载vue.js,页面直接报错404,只需要切换到英文版,重新下载即可成功. 或者直 ...
- vue.js 多图上传，并可预览
<!DOCTYPE html> <html> <head><title>vue.js 简单多图上传图片</title><meta ht ...
- 文件上传 java 完美,vue+java实现文件上传（excel等），会出现跨域问题，直接用form表单提交就不会有问题了（new FormData()）...
vue+java实现文件上传(excel等),会出现跨域问题,直接用form表单提交就不会有问题了(new FormData()) 地址:https://www.cnblogs.com/muscles ...
最新文章
- linux pipe函数 重定向,I/O重定向和管道——《Unix/Linux编程实践教程》读书笔记（第10章）...
- vc6.0快捷键大全- -
- python中seaborn画swarm图_Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot
- php无嵌套遍历多维数组,不递归怎么遍历多维数组（维数不定）
- mongodb基本概念
- 单片机 c语言百位加上小数点,51单片机水温控制LCD显示加VB上位机温度曲线绘制...
- jw player 5去掉share,info,embed页面
- centos7.2 ftp连接问题
- 利用Proteus 8.9运行stm32最简单的跑马灯程序
- 百度网盘提取码_百度网盘提取码查询神器分享
- win10用一会就蓝屏重启_win10蓝屏memory management原因以及解决方法
- 基于 软件体系结构（第3版）考试重点和复习指南
- 网络协议和标准——IEEE802
- android获取ssid,Android系绳 – 获取当前的SSID
- 诡异的交换机CPU利用率超高
- 门禁系统一定要服务器吗,门禁系统服务器功能配置
- 阿里云 PAI 免费试用搭建 stable-diffusion-WebUI
- Spring源码(十)-IOC终结篇
- android studio 接口方法,Android Studio第三十期 - 介绍几种网络请求方式写法
- vue flv播放器