作者:zccst
文件上传,这个问题始终一知半解,今天又近真相一步。
二、formData(只支持FF)
一、FileList(所有浏览器都支持)
原来file还有一个FileList对象,类似NodeList,里面放着文件列表。根据MDN描述:
一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件.该类型的对象还有可能来自用户的拖放操作,查看DataTransfer对象了解详情.
1,使用FileList
所有type属性(attribute)为file的 <input> 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:
<input id="fileItem" type="file">
下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):
var file = document.getElementById('fileItem').files[0];
2,例子
例子
这个例子迭代了用户通过一个input元素选择的多个文件:
IE9下有bug
// ie9 don't support FileList Object
[url]http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files[/url]
解决办法:
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]
文件上传,这个问题始终一知半解,今天又近真相一步。
二、formData(只支持FF)
一、FileList(所有浏览器都支持)
原来file还有一个FileList对象,类似NodeList,里面放着文件列表。根据MDN描述:
一个FileList对象通常来自于一个HTML input元素的files属性,你可以通过这个对象访问到用户所选择的文件.该类型的对象还有可能来自用户的拖放操作,查看DataTransfer对象了解详情.
1,使用FileList
所有type属性(attribute)为file的 <input> 元素都有一个files属性(property),用来存储用户所选择的文件. 例如:
<input id="fileItem" type="file">
下面的一行代码演示如何获取到一个FileList对象中的第一个文件(File 对象):
var file = document.getElementById('fileItem').files[0];
2,例子
例子
这个例子迭代了用户通过一个input元素选择的多个文件:
// fileInput是一个 HTML input 元素: <input type="file" id="myfileinput" multiple>
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
[url]http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files[/url]
解决办法:
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();
}
});
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
[img]http://dl2.iteye.com/upload/attachment/0109/0668/fb266dfa-95ca-3d09-b41e-5f04a19ba9a1.png[/img]