php 拖拽 上传文件 进度,在Vue中如何实现带进度条的文件拖动上传功能
这篇文章主要介绍了Vue实现带进度条的文件拖动上传功能,本文通过实例代码给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
1. 基本界面
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
Document
把要上传的文件拖动到这里
new Vue({
el: '#app',
data: {},
methods: {},
mounted: function () {}
});
2. 检测拖动事件
首先让页面支持文件拖拽,在 Vue 的 mounted() 函数中添加代码:mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}
当把文件拖动到浏览器的拖动区域时,会触发三种事件:文件第一次进入拖动区时,触发 dragenter 事件
文件在拖动区来回拖拽时,不断触发 dragover 事件
文件已经在拖动区,并松开鼠标时,触发 drop 事件
实现拖动上传,我们只需要关心 drop 事件。不过另外两个事件也需要监听,目的是阻止浏览器默认行为。如果不阻止,那么把文件拖到浏览器时,浏览器就会自动下载这个文件(默认行为),drop 事件触发不出来。
事件的监听函数添加在 Vue 的 methods 对象中:methods: {
uploadFile: function (file) {
console.log(file);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},
onDrop() 函数中,通过 e.dataTransfer.files 可以拿到用户拖动到浏览器的文件的基本信息,uploadFile() 函数现在只这些信息打印了出来,可以了解到,拖动到浏览器的每个文件都是一个 File 对象:
3. 处理拖动事件
现在,我们要给 uploadFile() 函数增加功能,实现拖动文件时,拖动区出现文件名和一个上传进度条。
首先在 Vue 的 data 对象中定义 files 属性,用来保存所有拖动到浏览器中文件的名称。然后在uploadFile() 函数每当被调用时,把文件名和上传进度保存到 files 中:data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
},
}
上传进度的功能在后面再介绍,先写一个固定值。
相应地,在HTML代码中,用 v-for 关键字显示 files 的每一项:
把要上传的文件拖动到这里
{{ file.name }}
:style="{ width: file.uploadPercentage+'%' }">
而且,“把要上传的文件拖动到这里” 的提示只在拖动区没有文件的时候才显示:
把要上传的文件拖动到这里
这样,拖动效果就有了:
4. 文件上传
接下来实现真正的文件上传,继续往 uploadFile() 函数添加代码:uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 67
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.send(fd);
},
这里用到了 FormData,把要上传的文件附在了 FormData 上,并通过AJAX方式发送给PHP端。PHP端代码:if (isset($_FILES['myFile'])) {
move_uploaded_file($_FILES['myFile']['tmp_name'], 'uploads/' . $_FILES['myFile']['name']);
echo 'OK';
} else {
echo 'No file specified';
}
现在刷新下页面,把电脑上的两个文件拖到浏览器中,PHP端会接收并保存文件到 uploads 目录:
提示:如果拖放时遇到PHP返回了No file specified,或者 $_FILES 为 NULL 的情况时,有可能是PHP限制了POST请求最大字节,或者限制了上传文件的体积。这时候需要调整下php.ini中的这两个配置:post_max_size = 20M // POST请求的最大字节数
upload_max_filesize = 20M // 上传文件的最大体积
进度条的展示
基本的上传功能完成了,最后我们来完成进度条。每当AJAX请求发送了一段时间的数据时,都会生成一个 progress 事件,我们可以监听 progress 事件来知道当前的上传进度:uploadFile: function (file) {
...
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},
e.loaded 代表当前AJAX发送了多少字节,e.total 代表AJAX总共要发送多少字节。通过这两个属性可以计算上传进度的百分比。
这样,一个带进度条的文件拖动上传功能就完成了。
附:完整代码
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
.dropbox {
border: .25rem dashed #007bff;
min-height: 5rem;
}
Document
把要上传的文件拖动到这里
{{ file.name }}
:style="{ width: file.uploadPercentage+'%' }">
new Vue({
el: '#app',
data: {
files: []
},
methods: {
uploadFile: function (file) {
var item = {
name: file.name,
uploadPercentage: 0
};
this.files.push(item);
var fd = new FormData();
fd.append('myFile', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.addEventListener('progress', function (e) {
item.uploadPercentage = Math.round((e.loaded * 100) / e.total);
}, false);
xhr.send(fd);
},
onDrag: function (e) {
e.stopPropagation();
e.preventDefault();
},
onDrop: function (e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
for (var i = 0; i !== dt.files.length; i++) {
this.uploadFile(dt.files[i]);
}
}
},
mounted: function () {
var dropbox = document.querySelector('.dropbox');
dropbox.addEventListener('dragenter', this.onDrag, false);
dropbox.addEventListener('dragover', this.onDrag, false);
dropbox.addEventListener('drop', this.onDrop, false);
}
});
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
php 拖拽 上传文件 进度,在Vue中如何实现带进度条的文件拖动上传功能相关推荐
- RecyclerView长按拖拽排序 ,缩短长按响应时间,长按0.1秒就可以开始拖动
RecyclerView长按拖拽排序 ,缩短长按响应时间,长按0.1秒就可以开始拖动 度娘搜索RecyclerView长按拖拽排序,很多文章讲解,没找到缩短长按响应时间的,所以自己研究了一下 先看效果 ...
- python图片保存为txt文件_python实现对文件中图片生成带标签的txt文件方法
在深度学习中经常需要生成带标签的图片名称列表,xxxlist.txt文件,下面写一个简单的python脚本生成该文件列表. import os def generate(dir,label): fil ...
- JS - 文件上传组件WebUploader使用详解1(带进度的文件上传
一.基本介绍 1,什么是 WebUploader? WebUploader 是由百度公司团队开发的一个以 HTML5 为主,FLASH 为辅的现代文件上传组件. 官网地址:http://fex.bai ...
- vue可视化拖拽生成工具_vdesjs: 基于vue的可视化拖拽,代码生成工具。提升前端开发效率,或者集成至项目作为在线拖拽工具。(持续迭代升级中)...
vdesjs 介绍 vdesjs是一款基于vue技术栈,可视化拖拽,代码生成工具.我们提供详细的文档来帮助您理解我们工具的实现原理,并且您可以方便的基于vdesjs来扩展您自己的代码生成组件. 技术选 ...
- vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
- Python记录鼠标的点击与拖拽时间并在文本文档中保存记录
网上看到很多 python 关于记录鼠标操作轨迹的方法,很少提到关于时间的记录. 因为在写一个关于游戏的脚本,为了尽可能地还原真人鼠标操作防止封号,鼠标的点击的时间间隔是其中尤为重要的一点.代码监听了 ...
- 史上最全,在vue中使用zTree实现树型结构
最近做了蛮多需求都是在vue里面去操作dom,着实让人头大 需求如下:要求树形结构按照设计稿样式(ztree原本的样式ui接受不了) 鼠标浮动上去的时候,有功能按钮出现,浮在功能按钮上面,出现对应的功 ...
- jsx怎么往js里传参数_在vue中使用jsx语法的使用方法
什么是JSX? JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到 我为什么要在vue中用JSX? 想折腾一下呗,开玩笑.最开始是因 ...
- vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染
vue介绍: Vue:当前较火的MVVM框架,轻量.简介.高效.组件化.数据驱动,模块和渲染函数的弹性选择,简单的语法及项目创建,渲染速度极快,基于Virtual Dom,利用虚拟DOM实现快速渲染: ...
最新文章
- ubuntu install node npm bower
- 用飞桨做自然语言处理:神经网络语言模型应用实例
- 3维旋转的3种表示方法之间的关系
- 【实用】SAP Call Transaction下钻功能大全
- 图像还可以这样玩!如何用OpenCV处理图像?
- React开发(132):ant design学习指南之form中控制展开和关闭逻辑
- UTF8,Unicode 的区别(zt)
- 液晶拼接处理器_创新维OLED拼接屏施工单位操作说明
- 8051 r0-r7 是什么
- 超级科技富豪:张朝阳跌宕起伏的人生
- Kotlin入门-带着问题,理解 对象表达式和对象声明
- python象棋博弈算法_python做中国国粹——象棋
- 发现一个国外的学习网站
- 为了广大AI男的婚姻幸福,求求AI男们不要学习金融男好榜样了
- windows安装perl
- SpringBoot项目入门,使用Eclipse创建Springboot项目
- 百度地图定位+卫星定位
- idea实现注册登录时使用QQ邮箱激活功能
- Simulink中的SIL实现方式
- 用Python对天气预报的数据进行数据分析