HTML5 文件域+FileReader 分段读取文件并上传到服务器


Posted in HTML / CSS onOctober 23, 2017

说明:使用Ajax方式上传,文件不能过大,最好小于三四百兆,因为过多的连续Ajax请求会使后台崩溃,获取InputStream中数据会为空,尤其在Google浏览器测试过程中。

1.简单分段读取文件为Blob,ajax上传到服务器

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">分段读取文件:</div>
        <div class="panel-body">
            <input type="file" id="file" />
            <blockquote style="word-break:break-all;"></blockquote>
        </div>
    </div>
</div>

JS:

/*
* 分段读取文件为blob ,并使用ajax上传到服务器
* 分段上传exe文件会抛出异常
*/
var fileBox = document.getElementById('file');
file.onchange = function () {
    //获取文件对象
    var file = this.files[0];
    var reader = new FileReader();
    var step = 1024 * 1024;
    var total = file.size;
    var cuLoaded = 0;
    console.info("文件大小:" + file.size);
    var startTime = new Date();
    //读取一段成功
    reader.onload = function (e) {
        //处理读取的结果
        var loaded = e.loaded;
        //将分段数据上传到服务器
        uploadFile(reader.result, cuLoaded, function () {
            console.info('loaded:' + cuLoaded + 'current:' + loaded);
            //如果没有读完,继续
            cuLoaded += loaded;
            if (cuLoaded < total) {
                readBlob(cuLoaded);
            } else {
                console.log('总共用时:' + (new Date().getTime() - startTime.getTime()) / 1000);
                cuLoaded = total;
            }
        });
    }
    //指定开始位置,分块读取文件
    function readBlob(start) {
        //指定开始位置和结束位置读取文件
        //console.info('start:' + start);
        var blob = file.slice(start, start + step);
        reader.readAsArrayBuffer(blob);
    }
    //开始读取
    readBlob(0);
    //关键代码上传到服务器
    function uploadFile(result, startIndex, onSuccess) {
        var blob = new Blob([result]);
        //提交到服务器
        var fd = new FormData();
        fd.append('file', blob);
        fd.append('filename', file.name);
        fd.append('loaded', startIndex);
        var xhr = new XMLHttpRequest();
        xhr.open('post', '../ashx/upload2.ashx', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // var data = eval('(' + xhr.responseText + ')');
                console.info(xhr.responseText);
                if (onSuccess)
                    onSuccess();
            }
        }
        //开始发送
        xhr.send(fd);
    }
}

后台代码:
 

/// <summary>
/// upload2 的摘要说明
/// </summary>
public class upload2 : IHttpHandler
{
    LogHelper.LogHelper _log = new LogHelper.LogHelper();
    int totalCount = 0;
    public void ProcessRequest(HttpContext context)
    {
        HttpContext _Context = context;
        //接收文件
        HttpRequest req = _Context.Request;
        if (req.Files.Count <= 0)
        {
            WriteStr("获取服务器上传文件失败");
            return;
        }
        HttpPostedFile _file = req.Files[0];
        //获取参数
        // string ext = req.Form["extention"];
        string filename = req.Form["filename"];
        //如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G
        int loaded = Convert.ToInt32(req.Form["loaded"]);
        totalCount += loaded;

        string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\";
        newname += filename;
        //接收二级制数据并保存
        Stream stream = _file.InputStream;
        if (stream.Length <= 0)
            throw new Exception("接收的数据不能为空");
        byte[] dataOne = new byte[stream.Length];
        stream.Read(dataOne, 0, dataOne.Length);
        FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024);
        try
        {
            fs.Write(dataOne, 0, dataOne.Length);
        }
        finally
        {
            fs.Close();
            stream.Close();
        }
        _log.WriteLine((totalCount + dataOne.Length).ToString());
        WriteStr("分段数据保存成功");
    }
    private void WriteStr(string str)
    {
        HttpContext.Current.Response.Write(str); 
    }
    public bool IsReusable
    {
        get
        {
            return true;
        }
    }

2.分段读取文件为blob ,并使用ajax上传到服务器,追加中止、继续功能操作

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">分段读取文件:</div>
        <div class="panel-body">
            <input type="file" id="file" />
            <br />
            <input type="button" value="中止" onclick="stop();" /> 
            <input type="button" value="继续" onclick="containue();" />
            <br />
            <progress id="progressOne" max="100" value="0" style="width:400px;"></progress>
            <blockquote id="Status" style="word-break:break-all;"></blockquote>
        </div>
    </div>
</div>

JS:

/*
* 分段读取文件为blob ,并使用ajax上传到服务器
* 使用Ajax方式提交上传数据文件大小应该有限值,最好500MB以内
* 原因短时间过多的ajax请求,Asp.Net后台会崩溃获取上传的分块数据为空
* 取代方式,长连接或WebSocket
*/
var fileBox = document.getElementById('file');
var reader = null;  //读取操作对象
var step = 1024 * 1024 * 3.5;  //每次读取文件大小
var cuLoaded = 0; //当前已经读取总数
var file = null; //当前读取的文件对象
var enableRead = true;//标识是否可以读取文件
fileBox.onchange = function () {
    //获取文件对象
    file = this.files[0];
    var total = file.size;
    console.info("文件大小:" + file.size);
    var startTime = new Date();
    reader = new FileReader();
    //读取一段成功
    reader.onload = function (e) {
        //处理读取的结果
        var result = reader.result;
        var loaded = e.loaded;
        if (enableRead == false)
            return false;
        //将分段数据上传到服务器
        uploadFile(result, cuLoaded, function () {
            console.info('loaded:' + cuLoaded + '----current:' + loaded);
            //如果没有读完,继续
            cuLoaded += loaded;
            if (cuLoaded < total) {
                readBlob(cuLoaded);
            } else {
                console.log('总共用时:' + (new Date().getTime() - startTime.getTime()) / 1000);
                cuLoaded = total;
            }
            //显示结果进度
            var percent = (cuLoaded / total) * 100;
            document.getElementById('Status').innerText = percent;
            document.getElementById('progressOne').value = percent;
        });
    }
    //开始读取
    readBlob(0);
    //关键代码上传到服务器
    function uploadFile(result, startIndex, onSuccess) {
        var blob = new Blob([result]);
        //提交到服务器
        var fd = new FormData();
        fd.append('file', blob);
        fd.append('filename', file.name);
        fd.append('loaded', startIndex);
        var xhr = new XMLHttpRequest();
        xhr.open('post', '../ashx/upload2.ashx', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                if (onSuccess)
                    onSuccess();
            } else if (xhr.status == 500) {
                //console.info('请求出错,' + xhr.responseText);
                setTimeout(function () {
                    containue();
                }, 1000);
            }
        }
        //开始发送
        xhr.send(fd);
    }
}
//指定开始位置,分块读取文件
function readBlob(start) {
    //指定开始位置和结束位置读取文件
    var blob = file.slice(start, start + step);
    reader.readAsArrayBuffer(blob);
}
//中止
function stop() {
    //中止读取操作
    console.info('中止,cuLoaded:' + cuLoaded);
    enableRead = false;
    reader.abort();
}
//继续
function containue() {
    console.info('继续,cuLoaded:' + cuLoaded);
    enableRead = true;
    readBlob(cuLoaded);
}

后台代码同上

3.分段读取文件为二进制数组 ,并使用ajax上传到服务器

 使用二进制数组传递的方式,效率特别低,最终文件还与原始大小有些偏差

HTML内容同上

JS:

/*
    * 分段读取文件为二进制数组 ,并使用ajax上传到服务器
    * 使用二进制数组传递的方式,效率特别低,最终文件还与原始大小有些偏差
    */
var fileBox = document.getElementById('file');
var reader = new FileReader(); //读取操作对象
var step = 1024 * 1024;  //每次读取文件大小
var cuLoaded = 0; //当前已经读取总数
var file = null; //当前读取的文件对象
var enableRead = true;//标识是否可以读取文件
fileBox.onchange = function () {
    //获取文件对象
    if (file == null) //如果赋值多次会有丢失数据的可能
        file = this.files[0];
    var total = file.size;
    console.info("文件大小:" + file.size);
    var startTime = new Date();
    //读取一段成功
    reader.onload = function (e) {
        //处理读取的结果
        var result = reader.result;
        var loaded = e.loaded;
        if (enableRead == false)
            return false;
        //将分段数据上传到服务器
        uploadFile(result, cuLoaded, function () {
            console.info('loaded:' + cuLoaded + '----current:' + loaded);
            //如果没有读完,继续
            cuLoaded += loaded;
            if (cuLoaded < total) {
                readBlob(cuLoaded);
            } else {
                console.log('总共用时:' + (new Date().getTime() - startTime.getTime()) / 1000);
                cuLoaded = total;
            }
            //显示结果进度
            var percent = (cuLoaded / total) * 100;
            document.getElementById('Status').innerText = percent;
            document.getElementById('progressOne').value = percent;
        });
    }
    //开始读取
    readBlob(0);
    //关键代码上传到服务器
    function uploadFile(result, startIndex, onSuccess) {
        var array = new Int8Array(result);
        console.info(array.byteLength);
        //提交到服务器
        var fd = new FormData();
        fd.append('file', array);
        fd.append('filename', file.name);
        fd.append('loaded', startIndex);
        var xhr = new XMLHttpRequest();
        xhr.open('post', '../ashx/upload3.ashx', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                // console.info(xhr.responseText);
                if (onSuccess)
                    onSuccess();
            } else if (xhr.status == 500) {
                console.info('服务器出错');
                reader.abort();
            }
        }
        //开始发送
        xhr.send(fd);
    }
}
//指定开始位置,分块读取文件
function readBlob(start) {
    //指定开始位置和结束位置读取文件
    var blob = file.slice(start, start + step);
    reader.readAsArrayBuffer(blob);
}
//中止
function stop() {
    //中止读取操作
    console.info('中止,cuLoaded:' + cuLoaded);
    enableRead = false;
    reader.abort();
}
//继续
function containue() {
    console.info('继续,cuLoaded:' + cuLoaded);
    enableRead = true;
    readBlob(cuLoaded);
}

后台代码:

/// <summary>
/// upload3 的摘要说明
/// </summary>
public class upload3 : IHttpHandler
{
    LogHelper.LogHelper _log = new LogHelper.LogHelper();
    int totalCount = 0;
    public void ProcessRequest(HttpContext context)
    {
        HttpContext _Context = context;
        //接收文件
        HttpRequest req = _Context.Request;
        string data = req.Form["file"];
        //转换方式一
        //int[] intData = data.Split(',').Select(q => Convert.ToInt32(q)).ToArray();
        //byte[] dataArray = intData.ToList().ConvertAll(x=>(byte)x).ToArray();
        //转换方式二
        byte[] dataArray = data.Split(',').Select(q => int.Parse(q)).Select(q => (byte)q).ToArray();
        //获取参数
        string filename = req.Form["filename"];
        //如果是int 类型当文件大的时候会出问题 最大也就是 1.9999999990686774G
        int loaded = Convert.ToInt32(req.Form["loaded"]);
        totalCount += loaded;
        string newname = @"F:\JavaScript_Solution\H5Solition\H5Solition\Content\TempFile\";
        newname += filename;
        try
        {
            // 接收二级制数据并保存
            byte[] dataOne = dataArray;
            FileStream fs = new FileStream(newname, FileMode.Append, FileAccess.Write, FileShare.Read, 1024);
            try
            {
                fs.Write(dataOne, 0, dataOne.Length);
            }
            finally
            {
                fs.Close();
            }
            _log.WriteLine((totalCount + dataOne.Length).ToString());
            WriteStr("分段数据保存成功");
        }
        catch (Exception ex)
        {
            throw ex;
        }
    }
    private void WriteStr(string str)
    {
        HttpContext.Current.Response.Write(str);
    }
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

总结

以上所述是小编给大家介绍的HTML5 文件域+FileReader 分段读取文件并上传到服务器,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5 Canvas绘制五星红旗
May 04 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
css实现文章分割线样式的多种方法总结
Apr 21 HTML / CSS
html5清空画布方法(三种)
Oct 16 #HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 #HTML / CSS
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
Oct 16 #HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 #HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 #HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 #HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 #HTML / CSS
You might like
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
关于php中一些字符串总结
2016/05/05 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
Python元字符的用法实例解析
2018/01/17 Python
Python利用matplotlib.pyplot绘图时如何设置坐标轴刻度
2018/04/09 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python模拟实现斗地主发牌
2020/01/07 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
python-xpath获取html文档的部分内容
2020/03/06 Python
详解python中的异常捕获
2020/12/15 Python
python os.listdir()乱码解决方案
2021/01/31 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
简单html5代码获取地理位置
2014/03/31 HTML / CSS
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
材料采购员岗位职责
2013/12/17 职场文书
父母寄语大全
2014/04/12 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript
教你怎么用python selenium实现自动化测试
2021/05/27 Python
python 镜像环境搭建总结
2022/09/23 Python