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

2024-09-05 07:22:10

字體：大中小

來源：轉載

供稿：網友

說明：使用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();" />&emsp;            <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("文件大?。?quot; + 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 分段讀取文件并上傳到服務器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！

上一篇：html5清空畫布方法（三種）

下一篇：基于HTML5的WebGL實現json和echarts圖表展現在同一個界面