HTML5技术

HTML5之文件API - 覃

字号+ 作者:H5之家 来源:H5之家 2016-12-12 14:01 我要评论( )

问题很简单, 做个上传文件的页面。 html页面中简单两行代码就完成基本的文件上传页面。如下图。解决。 /***************************分割线********************/ 此时又来了一个新问题: 如何获取用户上传的这个文件的文件名、文件大

问题很简单,做个上传文件的页面。

html页面中简单两行代码就完成基本的文件上传页面。如下图。解决。

/***************************分割线********************/

此时又来了一个新问题:如何获取用户上传的这个文件的文件名、文件大小、文件类型?

var btn = document.getElementById("btn"), file = document.getElementById("file"), fileSize = document.getElementById("fileSize"), fileType = document.getElementById("fileType"); btn.onclick = function() { fileSize.innerHTML = file.files[0].size;  //files是一个数组,指的是第一个文件。 fileType.innerHTML = file.files[0].type;  //获取文件名是file.files[0].type };

效果如下图。解决

这个files就是一个文件集合的数组。他包含四个对象,分别是

/***************************分割线***************************/

此时又来一个新问题,用户上传了一张图片,并想预览一下?

这里引入一个新类型FileReader。类似于XMLHttpRequest。

这个类型下有5个对象,分别是

readAsText(file,encoding):以纯文本形式(text)读取文件,将读取到的文本保存在 result 属性中。第二个参数用于指定编码类型,是可选的。

readAsDataURL(file):读取文件并将文件以数据 URI 的形式(图片)保存在 result 属性中。

readAsBinaryString(file):读取文件并将一个字符串保存在 result 属性中,字符串中每个字符表示一字节。

readAsArrayBuffer(file):读取文件并将一个包含文件内容的 ArrayBuffer 保存在result 属性中。

abort(): 中断读取文件

还有6个方法,分别是:

onabort 中断触发
onerror 错误触发
onprogress 读取中触发
onload 成功读取后触发
onloadend 无论失败或成功后触发

回归正题。

var btn = document.getElementById("btn"), file = document.getElementById("file"), fileSize = document.getElementById("fileSize"), fileType = document.getElementById("fileType"), show = document.getElementById("show"); btn.onclick = function() { reader = new FileReader();    //先new一个对象。 reader.readAsDataURL(file.files[0]); //重要的一步,获取图片内容,图片的内容会保存在reader.result中 reader.onload = function(){ show.innerHTML = '<img src="'+ reader.result + '" alt="这是图片"/>';//页面显示 } };

  

<span>文件大小:</span><span></span><br/> <span>文件类型:</span><span></span><br/>

 

真好看。

同理,还可以读取text文本,n进制文件等。。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    HTML5 与 CSS3 jQuery部分知识总结 - 细数逝去的过往

    2016-12-12 15:00

  • Pro HTML5 Programming(Second Edition)2.Canvas API(2) - 林泠

    Pro HTML5 Programming(Second Edition)2.Canvas API(2) - 林泠

    2016-12-10 10:00

  • Html5 设置菱形链接菜单 - 飞翔的月亮

    Html5 设置菱形链接菜单 - 飞翔的月亮

    2016-12-07 18:00

  • 彻底搞懂Html5本地存储技术(一) - 碧霄中游

    彻底搞懂Html5本地存储技术(一) - 碧霄中游

    2016-12-07 14:00

网友点评
>