pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5 文件域+FileReader 分段讀取文件并上傳到服務器

這篇文章主要介紹了HTML5 文件域+FileReader 分段讀取文件并上傳到服務器,需要的朋友可以參考下

說明:使用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;
        }
    }
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章主要介紹了有關HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實現柱狀圖的示例,本文使用canvas來實現一個圖表,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產品線較多,涵蓋了音視頻編輯、圖像處理、平面設計、影視后期等領域。這篇文章主要介紹了Adobe Html5 Extension開發初體驗圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經典3D虛擬機房漫游動畫,需要的朋友可以參考下
這篇文章主要介紹了html5實現移動端適配完美寫法,需要的朋友可以參考下
本篇文章主要介紹了HTML5響應式(自適應)網頁設計的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 科普仪器菏泽市教育教学仪器总厂 | 圆盘鞋底注塑机_连帮鞋底成型注塑机-温州天钢机械有限公司 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 外贮压-柜式-悬挂式-七氟丙烷-灭火器-灭火系统-药剂-价格-厂家-IG541-混合气体-贮压-非贮压-超细干粉-自动-灭火装置-气体灭火设备-探火管灭火厂家-东莞汇建消防科技有限公司 | 宿舍管理系统_智慧园区系统_房屋/房产管理系统_公寓管理系统 | 「银杏树」银杏树行情价格_银杏树种植_山东程锦园林 | 高低温万能试验机-复合材料万能试验机-馥勒仪器 | 东莞画册设计_logo/vi设计_品牌包装设计 - 华略品牌设计公司 | 北京网站建设-企业网站建设-建站公司-做网站-北京良言多米网络公司 | 不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰]-不锈钢法兰-碳钢法兰-法兰盘生产加工厂家-[鼎捷峰] | 南方珠江-南方一线电缆-南方珠江科技电缆-南方珠江科技有限公司 南汇8424西瓜_南汇玉菇甜瓜-南汇水蜜桃价格 | 聚氨酯催化剂K15,延迟催化剂SA-1,叔胺延迟催化剂,DBU,二甲基哌嗪,催化剂TMR-2,-聚氨酯催化剂生产厂家 | 慢回弹测试仪-落球回弹测试仪-北京冠测精电仪器设备有限公司 | 活性炭厂家-蜂窝活性炭-粉状/柱状/果壳/椰壳活性炭-大千净化-活性炭 | 数显恒温油浴-电砂浴-高温油浴振荡器-常州迈科诺仪器有限公司 | 折弯机-刨槽机-数控折弯机-数控刨槽机-数控折弯机厂家-深圳豐科机械有限公司 | 上海办公室装修,写字楼装修—启鸣装饰设计工程有限公司 | 千斤顶,液压千斤顶-力良企业,专业的液压千斤顶制造商,shliliang.com | 广西资质代办_建筑资质代办_南宁资质代办理_新办、增项、升级-正明集团 | 电动高尔夫球车|电动观光车|电动巡逻车|电动越野车厂家-绿友机械集团股份有限公司 | 无刷电机_直流无刷电机_行星减速机-佛山市藤尺机电设备有限公司 无菌检查集菌仪,微生物限度仪器-苏州长留仪器百科 | 水稻烘干机,小麦烘干机,大豆烘干机,玉米烘干机,粮食烘干机_巩义市锦华粮食烘干机械制造有限公司 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 成都珞石机械 - 模温机、油温机、油加热器生产厂家 | 二氧化碳/活性炭投加系统,次氯酸钠发生器,紫外线消毒设备|广州新奥 | 正压密封性测试仪-静态发色仪-导丝头柔软性测试仪-济南恒品机电技术有限公司 | 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 压砖机_电动螺旋压力机_粉末成型压力机_郑州华隆机械tel_0371-60121717 | 衡阳耐适防护科技有限公司——威仕盾焊接防护用品官网/焊工手套/焊接防护服/皮革防护手套 | 薪动-人力资源公司-灵活用工薪资代发-费用结算-残保金优化-北京秒付科技有限公司 | pbootcms网站模板|织梦模板|网站源码|jquery建站特效-html5模板网 | 盐城网络公司_盐城网站优化_盐城网站建设_盐城市启晨网络科技有限公司 | 穿线管|波纹穿线管|包塑金属软管|蛇皮管?闵彬专注弱电工程? | 仓储笼_仓储货架_南京货架_仓储货架厂家_南京货架价格低-南京一品仓储设备制造公司 | 水稻烘干机,小麦烘干机,大豆烘干机,玉米烘干机,粮食烘干机_巩义市锦华粮食烘干机械制造有限公司 水环真空泵厂家,2bv真空泵,2be真空泵-淄博真空设备厂 | 河南新乡德诚生产厂家主营震动筛,振动筛设备,筛机,塑料震动筛选机 | 自清洗过滤器_全自动过滤器_全自动反冲洗过滤器_量子过滤器-滑漮滴 | 蒸压釜-陶粒板隔墙板蒸压釜-山东鑫泰鑫智能装备有限公司 | 整车VOC采样环境舱-甲醛VOC预处理舱-多舱法VOC检测环境仓-上海科绿特科技仪器有限公司 |