FireFox浏览器使用Javascript上传大文件-侯体宗的博客

FireFox浏览器使用Javascript上传大文件
前端 / 管理员发布于 3年前 166

本程序是利用3.x的Firefox浏览器可以读取本地文件的特性，实现通过xmlHttPRequest上传大文件功能，并在可以上传过程中动态显示上传进度。略加修改，并与服务器端配合，可以实现断点续传等诸多功能。
本例主要是研究FireFox的file-input节点的一些特性，其他客户端应用，如Flash、Sliverlight等，在实现客户端大文件上传时，在数据传输与服务器端存储等方面，与本例的思路基本一致。
注意：文件体积似乎有临界点，但这个临界点是多少尚未确认。建议不要用此方法上传超过100M的文件。
以下是客户端javascript代码

复制代码代码如下:

/*
* FireFoxFileSender version 0.0.0.1
* by MK winnie_mk(a)126.com
*
* 【本程序仅限于FireFox3.x版本，其他浏览器是否可以运行未做测试。】
* 【测试通过：FireFox 3.6.8 / Apache/2.2.11 (Win32) php/5.2.6 】
* ******************************************************************************
* 本程序是利用3.x的FireFox浏览器可以读取本地文件的特性
* 实现通过xmlhttpRequest上传大文件功能
* 并在可以上传过程中动态显示上传进度
* 略加修改，并与服务器端配合，可以实现断点续传等诸多功能
* 本例主要是研究FireFox的file-input节点的一些特性
* 其他客户端应用，如Flash、Sliverlight等，在实现客户端大文件上传时
* 在数据传输与服务器端存储等方面，与本例的思路基本一致
* 注意：文件体积似乎有个临界点，但这个临界点是多少尚未确认。建议不要用此方法上传超过100M的文件。
* ******************************************************************************
*/
function FireFoxFileSender(config){
    var conf = config || {};
    /*
     * 错误信息队列
     */
    this.errMsg = [];
    /*
     * 判断各参数是否齐备
     */
    this.f = typeof conf.file == 'string' ?
　　　　document.getElementById(conf.file) : conf.file;
    if(!this.f){ this.errMsg.push('Error: Not set the input file.'); }
    else if(this.f.files.length < 1){ this.errMsg.push('Error: Not select a file.'); }
    else {
        this.fileName = this.f.value;
        /*
         * 在尝试直接发送二进制流时失败，改用发送base64编码数据。
         */
        this.data = (this.data = this.f.files[0].getAsDataURL())
　　　　　　.substr(this.data.indexOf(',') + 1);
        this.length = this.data.length;
        /*
         * 文件实际大小
         */
        this.fileSize = this.f.files[0].fileSize;
        /*
         * 文件类型
         */
        this.contentType = this.f.files[0].fileType;
    }
    /*
     * 服务器端接收地址
     */
    this.url = conf.url;
    if(!this.url){
　　　　this.errMsg.push('Error: Not set the instance url to send binary.');
　　}
    /*
     * 发送数据包的大小。默认100kb
     */
    this.packageSize = conf.packageSize || 102400;
    /*
     * 每次发送数据包大小应为4的倍数，确保服务器端转换base64编码正确。
     */
    if(this.packageSize % 4 != 0)
　　　　this.packageSize = parseInt(this.packageSize / 4) * 4;

    this.onSendFinished = conf.onSendFinished || null;
    this.onSending = conf.onSending || null;
    this.onError = conf.onError || null;
}
FireFoxFileSender.prototype = {
    /*
     * 记录当前发送的数据
     */
    currentData : null,
    /*
     * 记录读取位置
     */
    position : 0,
    /*
     * 数据大小。该值为base64字符串的长度。
     */
    length : -1,
    /*
     * 检查错误队列，尝试触发onError事件
     */
    checkError : function(){
        if(this.errMsg.length > 0){
            /*
             * 触发onError事件
             */
            typeof this.onError == 'function' && this.onError(this.errMsg);
            return;
        }
    },
    /*
     * 创建XMLHttpRequest
     */
    createSender : function(){
        var xhr = new XMLHttpRequest();
        xhr.open('POST', this.url, true);
        var _ = this;
        xhr.onreadystatechange = function(){
            /*
             * 当服务器段响应正常，则循环读取发送。
             */
            if(xhr.readyState == 4 && xhr.status == 200){
                /*
                 * 触发onSending事件
                 */
                if(typeof _.onSending == 'function') _.onSending(_, xhr);
                /*
                 * 延时发送下一次请求，否则服务器负担过重
                 */
                var send = setTimeout(function(){
                    _.send();
                    clearTimeout(send);
                    send = null;
                }, 100);
            }
        }
        return xhr;
    },
    /*
     * 发送数据
     */
    send : function(){
        this.checkError();
        /*
         * 获取当前要发送的数据
         */
        this.currentData = this.data.substr(this.position, this.packageSize);
        /*
         * 更改postion，模拟数据流移位
         */
        this.position += this.currentData.length;
        /*
         * 如果读取字符串长度大于0，则发送该数据
         * 否则触发onSendFinished事件
         */
        if(this.currentData.length > 0) {
            var xhr = this.createSender();
            /*
             * 自定义头部信息，通知服务器端文件相关信息
             * 实际应用时可修改此部分。
             */
            xhr.setRequestHeader('#FILE_NAME#', this.fileName);
            xhr.setRequestHeader('#FILE_SIZE#', this.length);
            xhr.setRequestHeader('#CONTENT_TYPE#', this.contentType);

            xhr.send(this.currentData);
        } else if(typeof this.onSendFinished == 'function') {
            /*
             * 触发onSendFinished事件
             */
            this.onSendFinished(this);
        }
    },
    /*
     * 计算已发送数据百分比
     */
    percent : function(){
        if(this.length <= 0 ) return -1;
        return Math.round((this.position / this.length) * 10000) / 100;
    },
    onSendFinished : null,    //该事件是以本地数据发送完成为触发，并不是服务器端返回的完成信息。
    onSending : null,
    onError : null
}

/*
* 上传按钮事件
*/
function send(fileID){
    var sender = new FireFoxFileSender(
        /*
         * 上传配置文件
         */
        {
            /*
             * input file 元素,可以是dom节点，也可以是id的字符串值
             */
            file : fileID,
            /*
             * 接收上传数据的服务器端地址
             */
            url : 'UPLOADER.php',
            /*
             * 每次发送数据包的大小。可根据服务器具体情况更改。IIS6默认为200K
             */
            packageSize : '200000',
            /*
             * 出现错误时触发该事件。本例仅在初始化时判断各参数是否齐备，并没有抛出发送过程中的错误。
             */
            onError : function(arrMsg){
                alert(arrMsg.join('\r\n'));
                sender = null;
                delete sender;
            },
            /*
             * 发送过程中触发该事件。本例中主要用于显示进度。
             */
            onSending : function(sd, xhr){
                var per = sd.percent();
                document.getElementById('Message').innerHTML = per + '% ';
                /*
                 * 该判断是在最后一次发送结束后，通过xhr的onreadystatechange事件触发的
                 * 如果传输过程中没有其他错误，基本可以确定为服务器端接收完成
                 */
                if(parseInt(per) == 100){ alert('服务器端接收完成'); }
            },
            /*
             * 该事件仅仅为【本地数据发送完成】时触发。
             * 请区别本地数据发送完成和服务器端返回完成信息这两种情况
             * 本例中并没有对服务器接收信息的情况做响应
             * 即使服务器端没有接收和保存任何数据
             * 只要确保xhr返回readyState == 4 和 status == 200
             * 发送就会继续进行
             * 服务器端如何返回完成信息可以通过更改接收数据页面的代码自定实现
             * 然后通过对xhr.responseText的值来做判断
             */
            onSendFinished : function(){
                alert('本地数据发送完成');
            }
        }
    );
    sender.send();
}

以下是服务器端php代码
复制代码代码如下:

/*
* 获取输入信息
*/
$b64 = file_get_contents("php://input");
/*
* 获取头部信息
*/
$headers = getallheaders();
$fileName = $headers['#FILE_NAME#'];
$contentType = $headers['#CONTENT_TYPE#'];

/*
* 做一些判断和处理...
*/

/*
* 以下是服务器端对发送数据的简单响应
* - 假如有数据被post过来则输出对base64转换为二进制流后，二进制流的长度
* - 否则输出0
* 这仅仅是一个例子，并且在js端没有接收这个信息
* 同样，也可以采用在header中写入反馈信息等等方法
* 回馈信息给客户端
* 主要目的是确定上传过程中是否有其他问题出现
* 以确保上传文件完整
*/
if(!empty($b64)){
    $stream = base64_decode($b64);
    echo strlen($stream);
    /*
     * 追加方式写入文件
     * 在此修改文件保存位置
     */
    $file = fopen('' . $fileName , 'a');
    if($file)
        if(fwrite($file, $stream))
            fclose($file);
} else echo '0';

客户端完整代码
复制代码代码如下:

2
3
4
5 FireFoxFileSender - !! ONLY FOR FireFox !!
6
7
8
9

相关文章
jq中实现图片压缩、base64转成file后上传至服务器示例(0个评论)
在JavaScript中实现批量下载OSS中的文件代码示例(0个评论)
如何优雅处理async await错误推荐：await-to-js库(0个评论)
lodash工具库(0个评论)
nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)

近期文章
在go语言中以邮件标题中获取SPF和DMARC，来判断是否为垃圾邮件之垃圾邮件过滤器功能实现(0个评论)
在go语言中使用attr字段标签提取XML属性数据示例(0个评论)
在laravel中介绍一个生成假数据的PHP库：FakerPHP(0个评论)
在laravel框架中对环境配置文件的加载过程步骤浅析(0个评论)
Laravel 10.12版本发布(0个评论)
在go语言中如何记录每个HTTP请求到你的Web服务器、日志记录器？(0个评论)
在Go语言中如何查找一个IP地址的网络地址？(0个评论)
ELK + Filebeat 搭建日志系统流程步骤(0个评论)
在laravel中以curl的方式请求京东联盟api获取数据流程步骤(0个评论)
在go语言中使用gin框架-中间件gin.BasicAuth()实现账号密码方式认证示例(0个评论)

近期评论
博主在
2023年国务院办公厅春节放假通知：1月21日起休7天中评论 @ xiaoB 你只管努力，剩下的叫给天意；天若有情天亦老，..
xiaoB 在
2023年国务院办公厅春节放假通知：1月21日起休7天中评论会不会春节放假后又阳一次？..
BUG4 在
你翻墙过吗？国内使用vpn翻墙可能会被网警抓，你需了解的事中评论不是吧？..
博主在
go语言+beego框架中获取get,post请求的所有参数中评论 @ t1 直接在router.go文件中配就ok..
Jade 在
如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..

Top