您的位置：首页 > Web前端 > HTML5

HTML5之File文件操作

2015-12-09 21:00 537 查看
本文主要就web中的文件操作进行整理。

file的属性

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

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

<body>
<input type="file" id="input">
<script>
var input = document.getElementById("input");
input.addEventListener("change",function(){
var selected_file = input.files[0];
console.log(selected_file.name);
console.log(selected_file.size);
console.log(selected_file.type);
},false);

</script>
</body>


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



示例：demo

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

这里我就不详细讲解拖拽的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 <len ; 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

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

示例：demo

拖拽txt文件显示文件内容

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

/**
* @description 处理函数
* @param files 拖动的文件
* @data 2015/11/23 20:00
*/
function handleFiles(files){
for (var i = 0,len = files.length; i <len ; 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);
}
}
</script>


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

示例：demo

拖拽实现文件上传

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

/**
* @description 处理函数
* @param files 拖动的文件
* @data 2015/11/23 20:00
*/
function handleFiles(files){
for (var i = 0,len = files.length; i <len ; 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);

}


示例:demo

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

还有就是读取的文件内容只能是txt文件，而word和excel等常用格式的文件则不行，所以后面的路还很长。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航