HTML 5 文本框
HTML 5 文本框最大的改进应该是允许选择多个文件。
<input type="file" id="f1" name="f2" />
以上文本框的效果和 HTML 4 中的是完全一样的,再看下面的:
<input type="file" id="f1" name="f2" multiple="multiple" />
这个文本框就是可以选择多个文件的了。要注意 multiple 在 HTML 这里并不存在 true、false,也就是说 multiple="false" 并不表示单选,它和 checked 这些是一个道理。
文件操作
最令人惊喜的就是在 JavaScript 中可以直接读文件内容了。这个示例请用 Firefox 3.6 或更新的版本来查看。
<input type="file" id="f1" name="f2" />
<input type="button" value="测试" onclick="javascript:foo(document.getElementById('f1').files);" />
<script type="text/javascript">
<!--
function foo(files)
{
var reader = new FileReader();
reader.onload = function ()
{
var str = "文件名:" + files[0].name + "\r\n" +
"文件大小:" + files[0].size + "\r\n" +
"文件内容:" + reader.result;
alert(str);
}
reader.readAsText(files[0]);
}
//-->
</script>
技术链接
https://developer.mozilla.org/en/Using_files_from_web_applications
https://developer.mozilla.org/en/DOM/File
https://developer.mozilla.org/en/DOM/FileReader