html5大文件上传技术（二）

最新推荐文章于 2024-06-29 16:04:34 发布

无心2046

最新推荐文章于 2024-06-29 16:04:34 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/u012743824/article/details/78920246

版权

3、大文件分片

FormData 中文件对象如果太大，post到服务器会出错，在.net修改网站配置，测试可上传十几兆的文件。

  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
    <httpRuntime maxRequestLength="20480"/>  //文件大小
  </system.web>

大文件采用分片上传

分片上传，就是把一个大的文件分成若干片，一片一片的传输。

分片上传范例：

客户端：

<body >  
    <script src="Scripts/jquery-3.2.1.js"></script>
    <div>
  <input id="File_1" type="file" /><input id="Button1" type="button" value="上传" οnclick="up_file()" /><br /><span id="output"></span>
   </div>
   <script>
        function up_file() {
            var select_files = document.getElementById("File_1");
            if (select_files.files.length < 1) { //简单判断是否选择文件
                alert('未选择上传文件！');
                return;
            }            
            var file = $('#File_1')[0].files[0];//获得文件
            var size = file.size;
            var name = file.name;
            var shardSize = 2 * 1024 * 1024;		//以2MB为一个分片//
            var shardCount = 0; //分片数
            var shard_index = 0;//上传片数计数
            shardCount = Math.ceil(size / shardSize);	//计算分片总数
            up_file_slice(file, shard_index, shardCount, shardSize) //开始上传
        
        }
        function up_file_slice(file, shard_index, shardCount, shardSize) {
            var start = shard_index * shardSize,
                end = Math.min(file.size, start + shardSize); //分片起始点


            var formData = new FormData();//构造一个表单，FormData是HTML5新增的
            formData.append("data", file.slice(start, end));		//slice方法用于切出文件的一部分
            formData.append("name", file.name);
            formData.append("total", shardCount);	//总片数
            formData.append("size", file.size);	//总片数
            formData.append("index", shard_index);		//当前是第几片
            $.ajax({
                url: '/File/up1.aspx',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function () {
                ++shard_index;
                $("#output").text(shard_index + "/" + shardCount); //用数字显示上传进度
                if (shard_index > shardCount) {
                    $("#output").text("文件上传完成！");
                }
                else {
                    up_file_slice(file, shard_index, shardCount, shardSize)//递归完成上传
                };
                               
            })
                .fail(function () {
                    $("#output").text("文件上传错误！");
                });
        };
    </script>
</body>

服务端 up1.aspx:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class File_up1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string msg = "";
        string flag = "";
        int total = 0;
        long size_total = 0;
        int file_index = 0;
        try
        { //从Request中取参数，注意上传的文件在Requst.Files中
            string name = Request["name"];
            total = Convert.ToInt32(Request["total"]);
            file_index = Convert.ToInt32(Request["index"]);
            size_total = Convert.ToInt64(Request["size"]);
            var data = Request.Files["data"];
            string dir = Server.MapPath("~/Upload");
            string file_shard = Path.Combine(dir, name + "_" + file_index); //文件片路径及文件名
            string part = ""; //文件部分
            string file_name = Path.Combine(dir, name); //文件路径及文件名
            if (file_index == total)
            {
                var fs = new FileStream(file_name, FileMode.Create);
                for (int i = 1; i <= total; ++i)
                {
                    part = Path.Combine(dir, name + "_" + i);
                    var bytes = System.IO.File.ReadAllBytes(part);
                    fs.Write(bytes, 0, bytes.Length);
                    bytes = null;
                    System.IO.File.Delete(part);
                }
             fs.Close();
             flag = "ok";    //返回是否成功
            }
            else
            {
                data.SaveAs(file_shard);
            }  
        }
        catch (Exception)
        {
            flag = "error";    //返回是否成功
        }
        msg = flag ;
        Response.Write(msg);
    }

}

无心2046

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
html5大文件上传技术（二）

3、大文件分片FormData 中文件对象如果太大，post到服务器会出错，在.net修改网站配置，测试可上传十几兆的文件。 //文件大小大文件采用分片上传分片上传，就是把一个大的文件分成若干片，一片一片的传输。分片上传范例：客户端： function
复制链接

扫一扫