html5+jquery+php实现文件拖拽上传
日期：2018-03-18
来源：程序思维浏览：2259次
关于这个拖拽上传，其实国外有很多网站已经有这样的应用，最早推出拖拽上传应用的是 Gmail，它支持标准浏览器下拖拽本地文件到浏览器中作为邮件的附件发送，但其实现在利用HTML5的功能实现，主要借助于新版支持的浏览器来实现。
拖拽上传应用主要使用了三个HTML5技术：
1、Drag&Drop : HTML5基于拖拽的事件机制.
2、File API : 可以很方便的让 Web 应用访问文件对象，File API 包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。
3、FormData : FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 应用模拟 Form 表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。
实现的详细的步骤如下：
Drag & Drop 包括以下事件：
dragstart： 要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素。
dragenter： 拖拽元素进入目标元素时触发，这个事件对象是目标元素。
dragover： 拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素。
dragleave： 拖拽某元素离开目标元素时触发，这个事件对象是目标元素。
dragend： 在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素。
drop： 将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素 。
完成一次成功页面元素拖拽的行为事件过程： dragstart –> dragenter –> dragover –> drop –> dragend。
/要想实现拖拽，首页需要阻止浏览器默认行为，一共四个事件。
$(document).on({
dragleave:function(e){ //拖离
e.preventDefault();
$('.dashboard_target_box').removeClass('over');
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖进
e.preventDefault();
$('.dashboard_target_box').addClass('over');
},
dragover:function(e){ //拖来拖去
e.preventDefault();
$('.dashboard_target_box').addClass('over');
}
});
File API 中的 FileList 接口,它主要通过两个途径获取本地文件列表：
一种是 <input type="file">的表单形式，
一种是 e.dataTransfer.files拖拽事件传递的文件信息。
var fileList = e.dataTransfer.files;
使用files 方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回 null 值。可以通过length属性获取文件数量。
var fileNum = fileList.length;
文件类型
fileList[0].type.indexOf (’image’)
AJAX 上传图片(file.getAsBinary & FormData)
file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的 js 代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据 append 到 formdata 对象中即可：
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('ff', fileList[0]);
xhr.send(fd);
完整代码如下：
1、index.html页面代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5+jquery+php实现文件拖拽上传</title>
<script src="jquery-1.7.2.min.js"></script>
<style>
.dashboard_target_box {
width:250px;
height:105px;
border:3px dashed #E5E5E5;
text-align:center;
position:absolute;
z-index:2000;
top:0;
left:0;
cursor:pointer
}
.dashboard_target_box.over {
border:3px dashed #000;
background:#ffa
}
.dashboard_target_messages_container {
display:inline-block;
margin:12px 0 0;
position:relative;
text-align:center;
height:44px;
overflow:hidden;
z-index:2000
}
.dashboard_target_box_message {
position:relative;
margin:4px auto;
font:15px/18px helvetica, arial, sans-serif;
font-size:15px;
color:#999;
font-weight:normal;
width:150px;
line-height:20px
}
.dashboard_target_box.over #dtb-msg1 {
color:#000;
font-weight:bold
}
.dashboard_target_box.over #dtb-msg3 {
color:#ffa;
border-color:#ffa
}
#dtb-msg2 {
color:orange
}
#dtb-msg3 {
display:block;
border-top:1px #EEE dotted;
padding:8px 24px
}
</style>
<script>
$(document).ready(function(){
//设计一段比较流行的滑动样式
$('#drop_zone_home').hover(function(){
$(this).children('p').stop().animate({top:'0px'},200);
},function(){
$(this).children('p').stop().animate({top:'-44px'},200);
});
//要想实现拖拽，首页需要阻止浏览器默认行为，一个四个事件。
$(document).on({
dragleave:function(e){ //拖离
e.preventDefault();
$('.dashboard_target_box').removeClass('over');
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖进
e.preventDefault();
$('.dashboard_target_box').addClass('over');
},
dragover:function(e){ //拖来拖去
e.preventDefault();
$('.dashboard_target_box').addClass('over');
}
});
//================上传的实现
var box = document.getElementById('target_box'); //获得到框体
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//fileList.length 用来获取文件的长度（其实是获得文件数量）
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
$('.dashboard_target_box').removeClass('over');
return;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
$('.dashboard_target_box').removeClass('over');
return;
}
//var img = window.webkitURL.createObjectURL(fileList[0]);
//拖拉图片到浏览器，可以实现预览功能
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('ff', fileList[0]);
xhr.send(fd);
},false);
});
</script>
</head>
<body>
<div id="target_box" class="dashboard_target_box">
<div id="drop_zone_home" class="dashboard_target_messages_container">
<p id="dtb-msg2" class="dashboard_target_box_message" style="top:-44px">选择你的图片<br>
开始上传</p>
<p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px">拖动图片到<br>
这里</p>
</p>
</div>
</div>
</body>
</html>
2、php代码如下：
<?php
html5+jquery+php实现文件拖拽上传Demo下载
拖拽上传应用主要使用了三个HTML5技术：
1、Drag&Drop : HTML5基于拖拽的事件机制.
2、File API : 可以很方便的让 Web 应用访问文件对象，File API 包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。
3、FormData : FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 应用模拟 Form 表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。
实现的详细的步骤如下：
Drag & Drop 包括以下事件：
dragstart： 要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素。
dragenter： 拖拽元素进入目标元素时触发，这个事件对象是目标元素。
dragover： 拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素。
dragleave： 拖拽某元素离开目标元素时触发，这个事件对象是目标元素。
dragend： 在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素。
drop： 将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素 。
完成一次成功页面元素拖拽的行为事件过程： dragstart –> dragenter –> dragover –> drop –> dragend。
/要想实现拖拽，首页需要阻止浏览器默认行为，一共四个事件。
$(document).on({
dragleave:function(e){ //拖离
e.preventDefault();
$('.dashboard_target_box').removeClass('over');
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖进
e.preventDefault();
$('.dashboard_target_box').addClass('over');
},
dragover:function(e){ //拖来拖去
e.preventDefault();
$('.dashboard_target_box').addClass('over');
}
});
File API 中的 FileList 接口,它主要通过两个途径获取本地文件列表：
一种是 <input type="file">的表单形式，
一种是 e.dataTransfer.files拖拽事件传递的文件信息。
var fileList = e.dataTransfer.files;
使用files 方法将会获取到拖拽文件的数组形势的数据，每个文件占用一个数组的索引，如果该索引不存在文件数据，将返回 null 值。可以通过length属性获取文件数量。
var fileNum = fileList.length;
文件类型
fileList[0].type.indexOf (’image’)
AJAX 上传图片(file.getAsBinary & FormData)
file.getAsBinary获取文件流很简单，但是要想上传数据，就要模拟一下表单的数据格式了，首先看看模拟表单的 js 代码, FormData模拟表单数据时更是简洁，不用麻烦的去拼字符串，而是直接将数据 append 到 formdata 对象中即可：
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('ff', fileList[0]);
xhr.send(fd);
完整代码如下：
1、index.html页面代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5+jquery+php实现文件拖拽上传</title>
<script src="jquery-1.7.2.min.js"></script>
<style>
.dashboard_target_box {
width:250px;
height:105px;
border:3px dashed #E5E5E5;
text-align:center;
position:absolute;
z-index:2000;
top:0;
left:0;
cursor:pointer
}
.dashboard_target_box.over {
border:3px dashed #000;
background:#ffa
}
.dashboard_target_messages_container {
display:inline-block;
margin:12px 0 0;
position:relative;
text-align:center;
height:44px;
overflow:hidden;
z-index:2000
}
.dashboard_target_box_message {
position:relative;
margin:4px auto;
font:15px/18px helvetica, arial, sans-serif;
font-size:15px;
color:#999;
font-weight:normal;
width:150px;
line-height:20px
}
.dashboard_target_box.over #dtb-msg1 {
color:#000;
font-weight:bold
}
.dashboard_target_box.over #dtb-msg3 {
color:#ffa;
border-color:#ffa
}
#dtb-msg2 {
color:orange
}
#dtb-msg3 {
display:block;
border-top:1px #EEE dotted;
padding:8px 24px
}
</style>
<script>
$(document).ready(function(){
//设计一段比较流行的滑动样式
$('#drop_zone_home').hover(function(){
$(this).children('p').stop().animate({top:'0px'},200);
},function(){
$(this).children('p').stop().animate({top:'-44px'},200);
});
//要想实现拖拽，首页需要阻止浏览器默认行为，一个四个事件。
$(document).on({
dragleave:function(e){ //拖离
e.preventDefault();
$('.dashboard_target_box').removeClass('over');
},
drop:function(e){ //拖后放
e.preventDefault();
},
dragenter:function(e){ //拖进
e.preventDefault();
$('.dashboard_target_box').addClass('over');
},
dragover:function(e){ //拖来拖去
e.preventDefault();
$('.dashboard_target_box').addClass('over');
}
});
//================上传的实现
var box = document.getElementById('target_box'); //获得到框体
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//fileList.length 用来获取文件的长度（其实是获得文件数量）
//检测是否是拖拽文件到页面的操作
if(fileList.length == 0){
$('.dashboard_target_box').removeClass('over');
return;
}
//检测文件是不是图片
if(fileList[0].type.indexOf('image') === -1){
$('.dashboard_target_box').removeClass('over');
return;
}
//var img = window.webkitURL.createObjectURL(fileList[0]);
//拖拉图片到浏览器，可以实现预览功能
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('ff', fileList[0]);
xhr.send(fd);
},false);
});
</script>
</head>
<body>
<div id="target_box" class="dashboard_target_box">
<div id="drop_zone_home" class="dashboard_target_messages_container">
<p id="dtb-msg2" class="dashboard_target_box_message" style="top:-44px">选择你的图片<br>
开始上传</p>
<p id="dtb-msg1" class="dashboard_target_box_message" style="top:-44px">拖动图片到<br>
这里</p>
</p>
</div>
</div>
</body>
</html>
2、php代码如下：
<?php
if(!empty($_FILES["ff"])){
move_uploaded_file($_FILES["ff"]["tmp_name"],$_FILES["ff"]["name"]);
}
?>
html5+jquery+php实现文件拖拽上传Demo下载
精品好课
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...