html文档选中事件,HTML5 DOM File API

访问选中的文件

简单的html代码：

通过File API,我们可以在用户选取一个或者多个文件之后(如果你的程序可以让用户选择多个文件,记得要在input元素上加上multiple属性),访问到代表了所选文件的一个或多个File对象,这些对象被包含在一个FileList对象中.

如果用户只选择了一个文件,那么我们只需要访问这个FileList对象中的第一个元素.

可以使用传统的DOM选择方法来获取到用户所选择的文件:

var selected_file = document.getElementById("input").files[0];

也可以使用jquery选择器来选择：

var selected_file = $("#input").get(0).files[0];

获取所选文件的信息

用户所选择的文件都存储在了一个FileList对象上,其中每个文件都对应了一个File对象.你可以通过这个FileList对象的length属性知道用户一共选择了多少个文件:

var numFiles = files.length;

可以通过一个for循环语句来操作每个单独的File对象:

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

var file = files[i];

..

}

File对象上有三个属性提供了所包含文件的相关信息.

。name

文件名,只读字符串,不包含任何路径信息.

。size

文件大小,单位为字节,只读的64位整数.

。type

MIME类型,只读字符串,如果类型未知,则返回空字符串.

在change事件发生时读取所选择的文件

// accept="image/*"规定在文件上传中服务器只接受图像文件

动态添加change事件监听器

var inputElement = document.getElementById("inputField");

inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {

var fileList = this.files,nBytes = 0;

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

var file = files[i];

nBytes += file [i].size;

}

}

改变上传按钮样式

主流浏览器中，只需要使用样式display:none或者opacity:0把原本的文件输入框隐藏掉,然后在需要的时候调用它的click()方法就行了.

为自定义的按钮绑定click事件:

fileSelect.addEventListener("click", function (e) {

if (fileElem) {

fileElem.click();//触发隐藏的input file

}

e.preventDefault(); // prevent navigation to "#"

}, false);

通过拖放操作选择文件

重要的三个事件：dragenter, dragover,和drop；

//创建一个拖放操作的目的区域:

var dropbox;

dropbox = document.getElementById("dropbox");

dropbox.addEventListener("dragenter", dragenter, false);

dropbox.addEventListener("dragover", dragover, false);

dropbox.addEventListener("drop", drop, false);

//阻止dragenter和dragover事件的默认行为,这样才能触发drop事件

function dragenter(e) {

e.stopPropagation();

e.preventDefault();

}

function dragover(e) {

e.stopPropagation();

e.preventDefault();

}

//drop

function drop(e) {

e.stopPropagation();

e.preventDefault();

var dt = e.dataTransfer;

var files = dt.files;

//从事件对象中获取到dataTransfer对象,把该对象包含的Filelist对象传入函数handleFiles,这个函数会无区别的对待从input元素或拖放操作中来的文件列表.

handleFiles(files);

}

//handleFiles函数

function handleFiles(files) {

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

var file = files[i];

var imageType = /image.*/;

if (!file.type.match(imageType)) {//是否是一个图像文件

continue;

}

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

img.classList.add("obj");//每张图片添加一个obj类，方便在DOM树找到

img.file = file;//添加了一个file属性来确认每张图片的 File，这样可以帮助我们在之后真正的上传工作时获取到图片

preview.appendChild(img);//把缩略图添加到预览区域

//处理图片的异步加载

var reader = new FileReader();//创建新的FileReader对象

reader.onload = (function(aImg) {

return function(e) {

aImg.src = e.target.result; };

})(img);

reader.readAsDataURL(file);

}

}

使用对象URL来显示图片

两个DOM方法：window.URL.createObjectURL()和 window.URL.revokeObjectURL()

window.URL = window.URL || window.webkitURL;

function handleFiles(files) {

if (!files.length) {

fileList.innerHTML = "

No files selected!

";

} else {

var list = document.createElement("ul");

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

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

list.appendChild(li);

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

img.src = window.URL.createObjectURL(files[i]);

img.height = 60;

img.onload = function(e) {

window.URL.revokeObjectURL(this.src);

}

li.appendChild(img);

var info = document.createElement("span");

info.innerHTML = files[i].name + ": " + files[i].size + " bytes";

li.appendChild(info);

}

fileList.appendChild(list);

}

}

上传用户选择的文件

function sendFiles() {

var imgs = document.querySelectorAll(".obj");

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

//一个IMG元素,一个File对象或Blob对象.

new FileUpload(imgs[i], imgs[i].file);

}

}

function FileUpload(img, file) {

var reader = new FileReader();

this.ctrl = createThrobber(img);

var xhr = new XMLHttpRequest();

this.xhr = xhr;

var self = this;

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

if (e.lengthComputable) {

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

self.ctrl.update(percentage);

}

}, false);

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

self.ctrl.update(100);

var canvas = self.ctrl.ctx.canvas;

canvas.parentNode.removeChild(canvas);

}, false);

xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");

xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');

reader.onload = function(evt) {

xhr.sendAsBinary(evt.target.result);

};

reader.readAsBinaryString(file);

}

异步实现文件上传

if (isset($_FILES['myFile'])) {

// Example:

move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);

exit;

}

?>

dnd binary upload

function sendFile(file) {

var uri = "/index.php";

var xhr = new XMLHttpRequest();

var fd = new FormData();

xhr.open("POST", uri, true);

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

// Handle response.

alert(xhr.responseText); // handle response.

}

};

fd.append('myFile', file);

// Initiate a multipart/form-data upload

xhr.send(fd);

}

window.onload = function() {

var dropzone = document.getElementById("dropzone");

dropzone.ondragover = dropzone.ondragenter = function(event) {

event.stopPropagation();

event.preventDefault();

}

dropzone.ondrop = function(event) {

event.stopPropagation();

event.preventDefault();

var filesArray = event.dataTransfer.files;

for (var i=0; i

sendFile(filesArray[i]);

}

}

Drag & drop your file here...