H5的文件域FileReader怎样分段读取文件上传到服务器-

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

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

    

        
分段读取文件：
        

            
            

        
    

JS：

/*
* 分段读取文件为blob ，并使用ajax上传到服务器
* 分段上传exe文件会抛出异常
*/
var fileBox = document.getElementById(&＃39;file&＃39;);
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(&＃39;loaded:&＃39; + cuLoaded + &＃39;current:&＃39; + loaded);
            //如果没有读完，继续
            cuLoaded += loaded;
            if (cuLoaded 
后台代码：
/// 

/// upload2 的摘要说明
/// 
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上传到服务器，追加中止、继续功能操作

    

        
分段读取文件：
        

            
            

             
            
            

            
            

        
    
JS:
/*
* 分段读取文件为blob ，并使用ajax上传到服务器
* 使用Ajax方式提交上传数据文件大小应该有限值，最好500MB以内
* 原因短时间过多的ajax请求，Asp.Net后台会崩溃获取上传的分块数据为空
* 取代方式，长连接或WebSocket
*/
var fileBox = document.getElementById(&＃39;file&＃39;);
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(&＃39;loaded:&＃39; + cuLoaded + &＃39;----current:&＃39; + loaded);
            //如果没有读完，继续
            cuLoaded += loaded;
            if (cuLoaded 
后台代码同上
相信看了这些案例你已经掌握了方法，更多精彩请关注 第一PHP社区 其它相关文章！
相关阅读：
在html中怎样可以做到下拉菜单提交后保留选中值不返回默认值
在html中怎样可以用超链接打开新窗口并且控制窗口属性
怎样使用a标签的href属性与onclick事件
HTML标签嵌套的详细规则
以上就是H5的文件域FileReader怎样分段读取文件上传到服务器的详细内容，更多请关注 第一PHP社区 其它相关文章！