Vanessa

大前端的点滴生活

文件拖拽上传

1. 文件拖拽


不多说了,看代码和注释。貌似 Chrome 和 Firefix 都支持的。


    var dragOver = function (event) {
// 阻止默认事件
event.stopPropagation();
event.preventDefault();

// 修改样式
this.className = "xx-over";
};

var dragLeave = function (event) {
event.stopPropagation();
event.preventDefault();
this.className = "xx";
};

var drop = function (event) {
event.stopPropagation();
event.preventDefault();

this.className = "xx";
var files = event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
// 可在此对文件进行大小和类型的限制
files[i].type
files[i].size

// 正式上传
uploadFile(files[i]);
}
};

// 把文件拖拽于 content 容器上,监听拖拽中、拖拽结束、拖拽离开的事件
var content = document.getElementById("XXX");
content.addEventListener("dragover", dragOver, false);
content.addEventListener("dragleave", dragLeave, false);
content.addEventListener("drop", drop, false);


2. 文件上传
    基础知识准备



  •     XMLHttpRequest 请求


var request = new XMLHttpRequest();
request.open('GET', 'file:///home/user/file.json', false);
request.send(null);

open 参数说明


@param {string} 请求方式: GET, POST, PUT, DELETE


@param {string} 请求地址。注:可以是本地文件哦。


@param {boolean} 同步: false; 异步: true


其余常用属性,在此就不解释,解释也只是翻译而已 ^^


request.onreadystatechange
request.readyState
request.responseText
request.statusText
request.statuse



  • FormData Object


var formElement = document.getElementById("formId");
// 如果没有 form 元素,可以不用传入该参数
var formData = new FormData(formElement);
formData.append("name", nameValue);

request.send(formData);


  • 上传进度


    var req = new XMLHttpRequest();

req.addEventListener("progress", updateProgress, false);

req.open();

...

// progress on transfers from the server to the client (downloads)
function updateProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
...
} else {
// Unable to compute progress information since the total size is unknown
}
}


    实现


var uploadFile = function(file) {
var loadEnd = function() {
content.className = "bg loading";
var request = new XMLHttpRequest();
request.open('POST', "actionURL", true);

var formData = new FormData();
formData.append('upload',file);
request.send(formData);

request.onload = function () {
content.className = "bg";
};

request.onprogress = function (evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
} else {
// Unable to compute progress information since the total size is unknown
}
}
};

var reader = new FileReader();
// Firefox 3.6, WebKit
if(reader.addEventListener) {
reader.addEventListener('loadend', loadEnd, false);
} else {
reader.onloadend = loadEnd;
}
reader.readAsBinaryString(file);
};



欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步