挖掘input type=file的新知识

阅读更多

作者：zccst

文件上传，这个问题始终一知半解，今天又近真相一步。

二、formData（只支持FF）






一、FileList（所有浏览器都支持）
原来file还有一个FileList对象，类似NodeList，里面放着文件列表。根据MDN描述：
一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件.该类型的对象还有可能来自用户的拖放操作,查看DataTransfer对象了解详情.

1，使用FileList
所有type属性(attribute)为file的 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:


下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):

var file = document.getElementById('fileItem').files[0];

2，例子
例子
这个例子迭代了用户通过一个input元素选择的多个文件:

// fileInput是一个 HTML input 元素: 
var fileInput = document.getElementById("myfileinput");

// files 是一个 FileList 对象(类似于NodeList对象)
var files = fileInput.files;
var file;

//遍历所有文件
for (var i = 0; i < files.length; i++) {

    // 取得一个文件
    file = files.item(i);
    // 这样也行
    file = files[i];
    // 取得文件名
    alert(file.name);
}

IE9下有bug
// ie9 don't support FileList Object
http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files
解决办法：

  var self = this;
  //input输入框的change事件，要在input失去焦点的时候才会触发
  self.input.change(function(e) {
    // ie9 don't support FileList Object
    // http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files
    self._files = this.files || [{
      name: e.target.value
    }];// files 是一个 FileList 对象(类似于NodeList对象)
    
    var file = self.input.val();
    if (self.settings.change) {
      self.settings.change.call(self, self._files);
    } else if (file) {
      return self.submit();
    }
  });

如果您觉得本文的内容对您的学习有所帮助，您可以微信：