大佬教程收集整理的这篇文章主要介绍了HTML5之File文件操作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
首先看看input标签选中的文件中可以通过javascript获取的属性。
最常用的应该就是name,type和size了。代码如下：
<body>
<input type="file" id="input">
<script> @H_419_40@var input = document.getElementById("input"); input.addEventListener("change",@H_419_40@function(){ @H_419_40@var SELEcted_file = input.files[0]; console.log(SELEcted_file.Name); console.log(SELEcted_file.sizE); console.log(SELEcted_file.typE); },false); </script>
</body>
这里我就不详细讲解拖拽的API了，其实和mousemove类似：
@H_419_40@var dropBox;
dropBox = document.getElementById("dropBox");
dropBox.addEventListener("dragenter",dragenter,false);
dropBox.addEventListener("dragover",dragover,false);
dropBox.addEventListener("drop",drop,false);
@H_419_40@function dragenter(E){
e.stopPropagation();
e.preventDefault();
}
@H_419_40@function dragover(E){
e.stopPropagation();
e.preventDefault();
}
@H_419_40@function drop(E){
e.stopPropagation();
e.preventDefault();
//获取拖拽的文件对象
@H_419_40@var dt = e.dataTransfer;
@H_419_40@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){
@H_419_40@for (@H_419_40@var i = 0,len = files.length; i <len ; i++){
@H_419_40@var file = files[i];
@H_419_40@var imageType = /^image\//;
@H_419_40@if(!imageType.test(file.@H_419_40@typE)){
@H_419_40@conTinue;
}
@H_419_40@var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
@H_419_40@var preview = document.getElementById("preview");
preview.appendChild(img);
@H_419_40@var reader = @H_419_40@new FileReader();
reader.onload = (function(aImg){
@H_419_40@return function(E){
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(filE);
}
}
我们利用FileReader对象来读取存储在计算机上的文件。FileReader的介绍：FileReader
@H_404_189@拖拽txt文件显示文件内容同样我们采用拖拽的方法，但是这次我们将txt文件的内容读取出来：
/** * @description 处理函数 * @param files 拖动的文件 * @data 2015/11/23 20:00 */
@H_419_40@function handleFiles(files){
@H_419_40@for (@H_419_40@var i = 0,len = files.length; i <len ; i++){
@H_419_40@var file = files[i];
@H_419_40@var preview = document.getElementById("preview");
@H_419_40@var reader = @H_419_40@new FileReader();
reader.onload = (@H_419_40@function(){
@H_419_40@return @H_419_40@function(E){
alert (e.target.result);
};
})();
reader.readAsText(filE);
}
}
</script>
这里采用了readAsText方法，这个方法主要是针对Text格式，而前面例子中的readAsDataURL则主要用于图像。
这里通过拖拽来实现文件上传，将读取的文件内容通过ajax传递给后台PHP文件配合上传文件：
/** * @description 处理函数 * @param files 拖动的文件 * @data 2015/11/23 20:00 */
@H_419_40@function handleFiles(files){
@H_419_40@for (@H_419_40@var i = 0,len = files.length; i <len ; i++){
@H_419_40@var file = files[i];
@H_419_40@var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
@H_419_40@var preview = document.getElementById("preview");
preview.appendChild(img);
@H_419_40@var reader = @H_419_40@new FileReader();
reader.onload = (@H_419_40@function(aImg){
@H_419_40@return @H_419_40@function(E){
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(filE);
@H_419_40@var xhr = @H_419_40@new XMLhttprequest();
xhr.open("post","005.PHP",@H_419_40@truE);
@H_419_40@var fd = @H_419_40@new FormData();
fd.append("mypic",filE);
xhr.send(fd);
}
}
<?PHP $mypic = $_FILES['mypic']; @H_419_40@if(!@H_419_40@empty($mypic)){ $picname = $_FILES['mypic']['name']; $picsize = $_FILES['mypic']['size']; @H_419_40@if($picsize > 512000){ @H_419_40@echo '图片不能超过500k'; @H_419_40@exit; } $type = strstr($picname,'.'); @H_419_40@if($type != ".git" && $type !=".jpg"){ @H_419_40@echo '图片格式不对'; @H_419_40@exit; } //上传路径 $pic_path = "./"."lf".$type; move_uploaded_file($mypic["tmp_name"],$pic_path); }
示例:demo
以上是大佬教程为你收集整理的HTML5之File文件操作全部内容，希望文章能够帮你解决HTML5之File文件操作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。