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