拖拽文件上传

来源：互联网发布：网络销售好不好编辑：程序博客网时间：2024/05/16 11:37

Drag&Drop : HTML5基于拖拽的事件机制.

File API : 可以很方便的让 Web 应用访问文件对象，File API 包括FileList、Blob、File、FileReader、URI scheme，本文主要讲解拖拽上传中用到的 FileList 和 FileReader 接口。

FormData : FormData 是基于 XMLHttpRequest Level 2的新接口，可以方便 web 应用模拟 Form 表单数据，最重要的是它支持文件的二进制流数据，这样我们就能够通过它来实现 AJAX 向后端发送文件数据了。

Drag & Drop 包括以下事件：

dragstart：要被拖拽的元素开始拖拽时触发，这个事件对象是被拖拽元素

dragenter：拖拽元素进入目标元素时触发，这个事件对象是目标元素

dragover：拖拽某元素在目标元素上移动时触发，这个事件对象是目标元素

dragleave：拖拽某元素离开目标元素时触发，这个事件对象是目标元素

dragend：在drop之后触发，就是拖拽完毕时触发，这个事件对象是被拖拽元素

drop：将被拖拽元素放在目标元素内时触发，这个事件对象是目标元素完成一次成功页面元素拖拽的行为事件过程： dragstart –> dragenter –> dragover –> drop –> dragend

HTML5 Drag & Drop 事件

/要想实现拖拽，首页需要阻止浏览器默认行为，一共四个事件。

$(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');

}

});

<!DOCTYPE html>

<head>

<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>

$(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;//获取文件对象

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);

})

</script>

</head>

<body>

<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>

</div>

</body>

</html>