html5file文件重置,HTML5之File文件操作

本文主要就web中的文件操作进行整理。

file的属性

首先看看input标签选中的文件中可以通过javascript获取的属性。

最常用的应该就是name,type和size了。代码如下：

当我们选中文件后，可以查看对应文件的名称，大小和类型：

拖拽选择图片预览图片内容

这里我就不详细讲解拖拽的API了，其实和mousemove类似：

var dropbox;

dropbox = document.getElementById("dropbox");

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

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

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

function dragenter(e){

e.stopPropagation();

e.preventDefault();

}

function dragover(e){

e.stopPropagation();

e.preventDefault();

}

function drop(e){

e.stopPropagation();

e.preventDefault();

//获取拖拽的文件对象

var dt = e.dataTransfer;

var files = dt.files;

handleFiles(files);

}

我们在将图片拖拽到指定div中并放开时，通过e.dataTransger.files来绑定文件，并执行handleFiles方法：

/** * @description 处理函数 * 1.判断是否为image类型 * 2.创建一个img标签并加入preview * 3.将img标签的src指定为拖拽的文件 * 4.readAsDataURL读取文件内容 * @param files 拖动的文件 * @data 2015/11/23 20:00 */

function handleFiles(files){

for (var i = 0,len = files.length; i

var file = files[i];

var imageType = /^image\//;

if(!imageType.test(file.type)){

continue;

}

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

img.classList.add("obj");

img.file = file;

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

preview.appendChild(img);

var reader = new FileReader();

reader.onload = (function(aImg){

return function(e){

aImg.src = e.target.result;

};

})(img);

reader.readAsDataURL(file);

}

}

我们利用FileReader对象来读取存储在计算机上的文件。FileReader的介绍：FileReader

从而达到图片的拖拽并预览效果。

拖拽txt文件显示文件内容

同样我们采用拖拽的方法，但是这次我们将txt文件的内容读取出来：

/** *@description 处理函数 *@param files 拖动的文件 *@data 2015/11/23 20:00 */

function handleFiles(files){

for (var i = 0,len = files.length; i

var file = files[i];

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

var reader = new FileReader();

reader.onload = (function(){

return function(e){

alert (e.target.result);

};

})();

reader.readAsText(file);

}

}

这里采用了readAsText方法，这个方法主要是针对Text格式，而前面例子中的readAsDataURL则主要用于图像。

拖拽实现文件上传

这里通过拖拽来实现文件上传，将读取的文件内容通过ajax传递给后台php文件配合上传文件：

/** *@description 处理函数 *@param files 拖动的文件 *@data 2015/11/23 20:00 */

function handleFiles(files){

for (var i = 0,len = files.length; i

var file = files[i];

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

img.classList.add("obj");

img.file = file;

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

preview.appendChild(img);

var reader = new FileReader();

reader.onload = (function(aImg){

return function(e){

aImg.src = e.target.result;

};

})(img);

reader.readAsDataURL(file);

var xhr = new XMLHttpRequest();

xhr.open("post","005.php",true);

var fd = new FormData();

fd.append("mypic",file);

xhr.send(fd);

}

}

php文件如下：

<?php $mypic = $_FILES['mypic']; if(!empty($mypic)){ $picname = $_FILES['mypic']['name']; $picsize = $_FILES['mypic']['size']; if($picsize > 512000){ echo '图片不能超过500k'; exit; } $type = strstr($picname,'.'); if($type != ".git" && $type !=".jpg"){ echo '图片格式不对'; exit; } //上传路径 $pic_path = "./"."lf".$type; move_uploaded_file($mypic["tmp_name"],$pic_path); }

FileReader的功能虽然还可以，但是还是有很多限制，比如ie10以上才支持，而Safari则不支持。

还有就是读取的文件内容只能是txt文件，而word和excel等常用格式的文件则不行，所以后面的路还很长。