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


    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 有效)

    如何实现异步文件上传

    有了File FileReader 对象的支持,异步文件上传将变得简单。(以前都会把form提交到iframe来实现)

    1:取得File对象

    2:读取2进制数据

    3:模拟HTTP请求,把数据发送出去(这里通常比较麻烦)
    在forefox下使用 XMLHttpRequest 对象的 sendAsBinary 方法发送数据;

    4:完美实现

    遇到的问题

    目前仅有 firefox 可以正确上传文件。(Chrome也可以采google.gears上传

    对于从firefox和chrome下读取到的文件数据好像不一样(不知道是否是调试工具的原因)

    Chrome以及其他高级浏览器没有 sendAsBinary 方法 只能使用 send 方法发送数据,有可能是上面的原因导致无法正确上传。(经过测试普通文本文件可以正确上传)

    如果你有兴趣?

    下载这个PHP环境的测试程序,研究下如何实现其他浏览器的文件上传

  • 相关阅读:
    解决面试题的思路--5
    剑指offer例题分享--4
    剑指offer--3
    剑指offer--2
    【数据结构】5.2 二叉搜索树的创建查找以及插入操作
    【数据结构】5.1 顺序表的查找以及二分查找的实现
    【数据结构】4.1图的创建及DFS深度遍历(不完善)
    【密码学】RSA加密 kotlin实现方法(支持任意字节长度)
    【数据结构】3-2哈夫曼树的实现(数组实现)以及哈夫曼编码
    【密码学】公钥密码体制概述
  • 原文地址:https://www.cnblogs.com/idche/p/2030440.html
Copyright © 2020-2023  润新知