【记录】File, FileReader 和 Ajax 文件上传

最新推荐文章于 2021-08-05 17:36:20 发布

转载最新推荐文章于 2021-08-05 17:36:20 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/idche/archive/2011/04/27/2030440.html

文章标签：

#ui #php #javascript #ViewUI

本文介绍HTML5中File和FileReader对象的功能，演示如何利用这些API实现文件的拖拽上传及Base64编码获取，并提供了异步文件上传的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

File and FileReader

File FileReader 可以干什么？

Ajax文件上传例子
FileReader 对象可以读取文件的 Base64编码数据（readAsDataURL），2进制字符串（readAsBinaryString），文本（readAsText）并且都是异步的。
对了，Email拖拽附件上传就可以利用 FileReader 配合 Ajax 完成。

File 对象

File对象可以从 input[type=file].files 数组，和拖拽事件 event.dataTransfer.files 中获取到。
第一张图是 Chrome 下的 File 对象，第2个图是Firefox下的File对象。Firefox下会多几个方法，注意这里的读取数据方法是同步的。

FileReader 对象

这是用来读取文件数据的（并且是异步的）。下面是一个简单的代码（file对象用上面的方法取得）

var fileReader = new FileReader();

fileReader.onloadend = function(){
    console.log(this.readyState); // 这个时候 应该是 2
    console.log(this.result); 读取完成回调函数，数据保存在result中
}

fileReader.readAsBinaryString(file);// 开始读取2进制数据 异步 参数为file 对象
//fileReader.readAsDataURL(file); // 读取Base64
//fileReader.readAsText(file);//读取文本信息

可以运行下面简单的例子（chrome 和 firefox 有效）
<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>html5 File and FileReader</title> <link href="html/ui.css" _mce_href="html/ui.css" rel="stylesheet" /> </head> <body> <mce:style type="text/css"></mce:style><style type="text/css" _mce_bogus="1"></style> <div class="box" id="baseInfo"> <h2>（把图片拖拽到这里）利用 FileReader 获取文件 base64 编码</h2> <div></div> </div> <div class="log"> <ul id="log"> </ul> </div> <mce:script type="text/javascript" ></mce:script> </body> </html>