使用HTML5的文件API,可以将操作系统中的文件直接拖放到浏览器的指定区域,实现文件上传到服务器。
实现步骤可以分为以下几步:
- 监听拖拽:监听页面元素的拖拽事件,包括:
dragenter、dragover、dragleave和drop
,一定要将dragover的默认事件取消掉,不然无法触发drop事件。如需拖拽页面里的元素,需要给其添加属性draggable=”true”
; - 获取拖拽文件:在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表,.length属性获取文件数量,.type属性获取文件类型。
- 发送图片:使用FormData模拟表单数据AJAX提交文件流。
下面就来看看代码如何实现吧
Html代码:
<div>
<div id="drop_area" style="border: 1px #ccc solid; height: 300px; width: 500px;">
请将图片拖拽到此区域</div>
<div id="preview">
</div>
</div>
Jquery代码:
<script type="text/javascript">
$(function () {
HoldbackBorwser(); //阻止浏览器默认行。
MonitorDrop(); //监听拖拽事件
});
//阻止浏览器默认行。
function HoldbackBorwser() {
$(document).on({
dragleave: function (e) { //拖离
e.preventDefault();
},
drop: function (e) { //拖后放
e.preventDefault();
},
dragenter: function (e) { //拖进
e.preventDefault();
},
dragover: function (e) { //拖来拖去
e.preventDefault();
}
});
}
//监听拖拽事件
function MonitorDrop() {
var box = document.getElementById('drop_area'); //拖拽区域
box.addEventListener("drop", function (e) {
e.preventDefault(); //取消默认浏览器拖拽效果
var fileList = e.dataTransfer.files; //获取文件对象
//循环遍历文件对象
for (var i = 0; i < fileList.length; i++) {
//检测文件是不是图片
if (fileList[i].type.indexOf('image') === -1) {
alert("您拖的不是图片!");
return false;
}
//拖拉图片到浏览器,可以实现预览功能
var img = window.URL.createObjectURL(fileList[i]);
var filename = fileList[i].name; //图片名称
var filesize = Math.floor((fileList[0].size) / 1024);
if (filesize > 10240) {
alert("上传大小不能超过10M.");
return false;
}
var str = "<img src='" + img + "'><p>图片名称:" + filename + "</p><p>大小:" + filesize + "KB</p>";
$("#preview").append(str);
//上传
UploadFile(fileList[i]);
}
}, false);
}
//上传图片
function UploadFile(fileArray) {
var formData1 = new FormData();
formData1.append('fileName1', fileArray);
// 提交图片数量
formData1.append('count', 1);
//开始上传图片
$.ajax({
url: 'Handler.ashx',
type: 'POST',
data: formData1,
contentType: false,
processData: false,
async: false,
success: function (json) {
if (json.status == "true") {
alert("上传成功!文件名为:" + json.data);
}
else {
alert(json.msg);
return false;
}
},
error: function () {
}
})
}
</script>