体验 HTML5 的文本框及文件操作

作者:vkvi 来源:千一网络(原创) 日期:2010-6-2

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

相关文章
文章评论