php 拖动上传文件,服务器_HTML5直接拖拽文件上传到服务器 附源代码， 通过HTML的文件API ，Firefox - phpStudy...

HTML5直接拖拽文件上传到服务器 附源代码

通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件，并上传到服务器。

相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS(内容管理系统)也将会从中受益。

让我们看一下Firefox 是如何使用拖拽上传功能的：

首先提供一个区域来放置文件

Html代码

然后监听拖拽过程中的dragenter、dragleave、drop等事件

Js代码

document.addEventListener("dragenter", function(e){

dropbox.style.borderColor = 'gray';

}, false);

document.addEventListener("dragleave", function(e){

dropbox.style.borderColor = 'silver';

}, false);

dropbox.addEventListener("dragenter", function(e){

dropbox.style.borderColor = 'gray';

dropbox.style.backgroundColor = 'white';

}, false);

dropbox.addEventListener("dragleave", function(e){

dropbox.style.backgroundColor = 'transparent';

}, false);

dropbox.addEventListener("dragenter", function(e){

e.stopPropagation();

e.preventDefault();

}, false);

dropbox.addEventListener("dragover", function(e){

e.stopPropagation();

e.preventDefault();

}, false);

dropbox.addEventListener("drop", function(e){

e.stopPropagation();

e.preventDefault();

handleFiles(e.dataTransfer.files);

submit.disabled = false;

}, false);

其中最主要的是drop事件中用handleFiles()依次处理所有文件

Js代码

handleFiles = function(files) {

for (var i = 0; i < files.length; i++) {

var file = files[i];

}

}

对于图片类型的文件可以直接读取内容，显示预览图

Js代码

if (!file.type.match(/image*/)) {

continue;

}

var img = document.createElement("img");

img.classList.add("obj");

img.file = file;

preview.appendChild(img);

var reader = new FileReader();

reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);

reader.readAsDataURL(file);

接下来就是核心功能：ajax上传。首先新建一个XHR请求

Js代码

var xhr = new XMLHttpRequest();

xhr.open('post', '/file/upload', true);

监听上传进度和完成事件

Js代码

xhr.upload.addEventListener("progress", function(e) {

if (e.lengthComputable) {

var percentage = Math.round((e.loaded * 100) / e.total);

img.style.opacity = 1-percentage/100.0;

}

}, false);

xhr.upload.addEventListener("load", function(e){

}, false);

最后把数据模拟成multipart/form-data的格式上传

Js代码

xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request.

xhr.setRequestHeader("Content-Length", fileSize);

var body = '';

body += "--" + boundary + "\r\n";

body += "Content-Disposition: form-data; name=\""+dropbox.getAttribute('name')+"\"; filename=\"" + fileName + "\"\r\n";

body += "Content-Type: "+fileType+"\r\n\r\n";

body += fileData + "\r\n";

body += "--" + boundary + "--\r\n";

xhr.sendAsBinary(body);相关阅读:

取得一定长度的内容，处理中文

VBS教程：正则表达式简介 -字符匹配

如何让网页自动适应显示器不同的“分辨率”

怎样拿出已坏c盘里的重要文件

List the Codec Files on a Computer

php中文字符截取防乱码

完美解决PJ的Cookies保存时限问题!可选择记录登陆时长!

Vista停止报告程序问题的方法

《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础

php cache类代码(php数据缓存类)

HTML5 旨在解决 Web 中的交互

javascript Array对象使用小结

打造IIS网站的专用“护心甲”—实战SSL加密

获取Javscript执行函数名称的方法