首页 > 代码库 > HTML5之文件API

HTML5之文件API

2024-08-26 00:38:51   222人阅读

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

    <!-- multiple代表可上传多个文件 -->
    <input type="file" id="file" multiple/>
    <input type="button" id="btn" value="上传" />

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就是一个文件集合的数组。他包含四个对象，分别是

  • name:该文件的文件名
  • size:文件的字节大小。注意是字节。[1kb==1024b(字节),1b == 8bit(比特),1Mb == 1024kb]
  • type:文件的类型。（text/html、image/png）
  • lastModifiedDate:字符串，文件上一次被修改的时间。（目前只有Chrome支持）

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

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

这里引入一个新类型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() {
    // fileSize.innerHTML = file.files[0].size;
    // fileType.innerHTML = file.files[0].type;
    var reader = new FileReader();　　　　//先new一个对象。
    reader.readAsDataURL(file.files[0]); //重要的一步，获取图片内容，图片的内容会保存在reader.result中
    reader.onload = function(){
        show.innerHTML = ‘<img src="http://www.mamicode.com/‘+ reader.result + ‘" alt="这是图片"/>‘;//页面显示
    }
};

　　

    <!-- multiple代表可上传多个文件 -->
    <input type="file" id="file" multiple/>
    <input type="button" id="btn" value="上传" />
    <br/>
    <!-- <span>文件大小：</span><span id="fileSize"></span><br/>
    <span>文件类型：</span><span id="fileType"></span><br/> -->
    <div id="show">
    </div>

 

真好看。技术分享

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

 

HTML5之文件API


联系
我们