html5 api（1）---input[type="file"]

2019独角兽企业重金招聘Python工程师标准>>>

html5 为我们提供了File的api，允许 我们去读取本地的文件，但是不允许我们去操作文件。我们可以通过标签<input type="file" />来进行选择文件或者是通过拖拽到浏览器中来进行选择打开或者是读取文件。

####访问文件列表 首先我们来看下面代码：

<form>
    <input type="file" id="myFile" name="" value="">
</form>

在这段代码中，我们嵌入一个input[type="file"]标签，我们可以通过这个标签来进行选择一个文件。在html5 中我们可以通过这个file来获取我们所选取一个fileList，这里面存储我们选择的的文件的一些信息。如下所示

var $file =document.getElementById('myFile');

$file.addEventListener('change', function(e){
    var files =$file.files;
    console.log(files);
})

上面的代码，就是我们通过file来获取我们所选取的文件的列表，并在文件改变的时候，我们将文件列表给打印出来的一个方法。其中打印出来的files是个什么鬼，上面已经说了，这其实是一个FileList对象，这个对象用来存储我们所选择的的文件，当然，如果我们没有对标签进行限制的时候，我们仅仅只能选择一个文件，所以这个时候我们的files的length等于1，但是当我们在input标签中添加了一个multiple属性的时候，我们就能够选择多个文件，当我们选择多个文件后，我们打印的files的length就不等于1了。

<form>
    <input type="file" multiple id="myFile" name="" value="">
</form>

####FileList中的file的基本属性 我们通过上面的方法能够获取出一个FileList对象，并且，我们能够通过FileList[index]来获取相应下标的文件信息，

lastModified 最后修改

lastModifiedDate 最后修改时间

name 文件名称

size 文件大小

type 文件类型

其中size的单位是字节

然后就是文件类型，我们选择不同的文件会给出不同的文件类型，比如说我们选择一个png这回给出文件的类型为image/png之类的，这个和我们设置文件选择类型的时候有关accept="image/*"。

隐藏文件选择按钮

很多时候我们不希望展示我们系统自带的那个文件选择按钮，而是希望使用我们自己的写的文件选择按钮，这个时候我们就需要将文件选择框给隐藏掉，然后通过click事件的出发来进行选择文件：

input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">选择文件</a>

var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
     fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

这样也能够实现打开文件选择框的功能。

####使用拖拽功能来实现文件的选择。 具体的实现可以参考下面你的例子；

<div id="dropbox" style="height: 300px; background: red;"></div>

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 handleFiles (fiels) {
        console.log(fiels);
    }
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();

        var dt = e.dataTransfer;
        var files = dt.files;

        handleFiles(files);
    }

上面给出了一个有关文件拖拽的功能。这样我们就能够根据上面功能来设计一个新的文件选择上传的功能。

上面就是有关input[type="file"]相关的内容。可能有些东西没有了解太透彻，还请见谅。

转载于:https://my.oschina.net/shuinian/blog/918966