Html5里的file对象的相关属性,和获取file对象的两种方法收藏


  • :
  • 03-19 14:52
  • :
  • 23次
  • :
  • 0条
  • 2赞

简介本文主要讲的是html5里获取file对象的两种方法和file对象的相关属性说明。

在HTML5之前,在web前端是获取不到文件的相关信息的,比如我们最常见的图片上传前的预览功能,纯前端是实现不了的,但HTML5就能实现,所依靠的就是HTML5里的file对象。

获取file对象有两种方法:

第一种:表单里的file上传控件:

<input id="file" type='file' multiple />
//加上multiple表示可多选
<script language="javascript">
$("#file").on("change",function(){
    var files=this.files;
    console.log(files);
});
</script>

第二种:使用拖拽的方式来获取到file对象:

<div id="drop">把文件拖拽到这里</div>
<script language="javascript">
$this=$("#drop");
$this.on("drop",function(e){
    var files = e.originalEvent.dataTransfer.files;
    console.log(files);
    return false;
});
$this.on("dragover",function(e){
    e.preventDefault();
});
</script>
//原文来自 爱jQuery www.aijquery.cn

上面的截图,第一条是拖拽了一个文件,第二条是拖拽了两个文件;

好了,知道了我们如何在html5里获取到file对象后,现在来看看file对象的具体有哪些实例:

要获取的方法很简单,直接用console.log()来打印出来就行:

name:文件名,该属性只读。
size:文件大小,单位为字节,该属性只读。
type:文件的 MIME 类型,如果分辨不出类型,则为空字符串,该属性只读。
lastModified:文件的上次修改时间,格式为时间戳。
lastModifiedDate:文件的上次修改时间,格式为 Date 对象实例。

注意:

看到上面file.type这个属性的解释了吗?

并不是所有的文件都能获取到file.type属性的,所以我们在做文件上传的时候,不能只依靠file.type来判断,要结合file.name来一起用:

var filetype=file.type || file.name;
//这一句就是在file.type为空的时候,获取file.name


您正在找的文章可能是: