仿QQ邮箱上传文件

实现效果：

1.jpg

涉及的知识点包括：

1.拖拽
设置成true，元素就可以拖拽
拖拽元素事件

 dragstart
 drag
 dragend
 

目标元素事件

 dragenter
 dragover
 dragleave
 drop
释放元素需要设置dragover的阻止默认
防止新文件下载需要设置成阻止默认
 

2.dataTransfer对象

1. 用来保存被拖动的数据
2. files
   2.1 包含一个在数据传输上所有可用的本地文件列表
   2.2 包含name、size、type等属性
   

3.FormData对象

1. 通过键值对的方式，来模拟表单控件的异步上传方式
2. append()
   

4.Ajax2

 onload
 responseType
 response
 ontimeout
 timeout
 

xhr.upload.onprogress

1. ev.loaded：当前上传量 B(字节)-变化的量至到总量
2. ev.total：上传总量 B(字节)-上传文件的大小
3. 注意大文件上传需要修改php.ini的上传大小限制

1. 检测触发区域
   
2. 进度条实现
3. 上传量换算
4. 上传时间换算

实例代码：
file2.php文件：

 
 
$fs = $_FILES['fileName'];

echo json_encode($fs);
 
 
?>

 
 
 
 
 
 
 
 
 

 
请拖拽到此区域！！！
 

 

 

 
 
0/s
 
00:00:00