体验 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

你前面那位网友看了:微软 Office 365 定期账单问题

相关文章
文章评论
标题:必填
内容:
专注软件研发 - 重庆云通科技有限公司
vkvi
vkvi

作者简介: vkvi,致力于 .NET Web 开发、移动开发的技术推广,在 .NET、SQL Server、Windows Server 等方面有深入研究和丰富经验,17 年间共计撰写文章近 7000 篇。 主持金融、国土、农业、电商等多个行业项目执行, 推行“技术提升生产力、人心决定成功率”的管理理论。 联系他