<BODY>
<input type="file" id="_file" multiple="true"/> <br/>
<input type="button" οnclick="handle();return false;" value="click to submit"/>
<br/>
<div id="res"></div>
</BODY>
<script type="text/javascript" >
function handle(){
var files1 = document.getElementById('_file').files;
document.getElementById('res').innerHTML = getFiles(files1);
};
function getFiles(files){
var str = "";
for(var f = 0 ; f< files.length ; f++) {
str += files[f].name + '/' + files[f].size + '/' + files[f].type + "/" +files[f].url +'<br/>';
}
return str;
};
</script>
浏览器FF 3.6
服务器apache2.2
在HTML4的时代，我们在上传文件的时候经常会碰到一个问题，就是如何限制文件的大小？
准确的来说是在文件没有到达服务器前是不能判断文件的大小，这样就只能在文件上传到服务器后才能决定是否保留此文件。
现在好了,在HTML5的时代，用JS就能知道上传的文件的大小。
如下代码：
以上代码声明了两个input type为 file 的的控件，这里和HTML4一样.
然后我们获取文件集合:
var files1 = document.getElementById('_file').files;
这里获取的file集合只能用 for..(i++) 这种形式遍历，而不能用for ..in这种形式。具体原因还没查到不知道为什么。并且这里的file集合的类型是object。
细心的童孩已经发现多了一个 multiple 的属性，它的意义在于一个input 标签可以多选文件（按住CTRL呵呵）。
这样就让我们告别了多个input[type=file]标签的时代。哈哈
此文件有三个属性
1. name
文件名字
2.type
文件的类型，注意这里的类型是一个没有参数的MIME类型。也就是不包含分号的MIME类型
3.size
文件的大小，以字节表示，这也是最有用的。
4. url
虽然moliza里有这个属性，但是实际的测试中，这个属性是undefined的，估计是草案改动了。
在chrome5浏览器中，mapping关系如下
name == fileName,
type == fileType,
size == fileSize
文件选择还不只这种方法，HTML5还支持DRAG-DROP，这个东西下期再看呵呵。。
451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
