1. First, implement large files upload . If it is a few megabytes or dozens of megabytes, use the basic upload method, but if it is a large file upload, it is best to use shard upload. Here I mainly use the client to read the sharded data to the server segment, and then save it. After the server segment is read, the sharded data is combined.
2. The front-end code is as follows:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %><html lang="zh-CN"><head><meta charset="utf-8"><title>Example of uploading HTML5 large file fragments</title><script src="Scripts/jquery-1.8.2.js"></script><link href="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel="stylesheet" /><script src="bootstrap-progressbar/bootstrap-progressbar.js"></script><%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" /><script src="JqueryUI/jquery-ui.js"></script>--%><script>function uploadFile() {$("#upload").attr("disabled", "disabled");var file = $("#file")[0].files[0], //File object fileNum = $("#file")[0].files[0].length,name = file.name, //File name size = file.size, //Total size succeed = 0;var shardSize = 2 * 1024 * 1024, //Share shardCount = Math.ceil(size / shardSize); //Total number of slices $('.progress .progress-bar').attr('data-transitiongoal', 0).progressbar({ display_text: 'fill' });for (var i = 0; i < shardCount; ++i) {//Calculate the start and end positions of each slice var start = i * shardSize, end = Math.min(size, start + shardSize);//Construct a form, FormData is a new var form added to HTML5. = new FormData(); form.append("data", file.slice(start, end)); //Slice method is used to cut out part of the file form.append("name", name); form.append("total", shardCount); //Total number of slices form.append("index", i + 1); //The current number of slices is //Ajax submits $.ajax({url: "Upload.ashx", type: "POST",data: form, async: true, //Async processData: false, //It's very important to tell jquery not to process form contentType: false, //It's very important to specify as false to form the correct Content-Typesuccess: function () {++succeed;$("#output").text(succeed + " / " + shardCount);var percent = ((succeed / shardCount).toFixed(2)) * 100;updateProgress(percent);if (succeed == shardCount) {$("#upload").removeAttr("disabled");}}});}} function progress(percent, $element) {var progressBarWidth = percent * $element.width() / 100;$element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");}//$(document).ready(function () {// $('.progress .progress-bar').progressbar({ display_text: 'fill' });//});function updateProgress(percentage) {$('.progress .progress-bar').attr('data-transitiongoal', percentage).progressbar({ display_text: 'fill' });}</script></head><body><input type="file" id="file" /><button id="upload" onclick="uploadFile();">Upload</button><span id="output" style="font-size: 12px">Waiting</span><div><div id="progressBar" role="progressbar" data-transitiongoal=""></div></div></body></html>3. The general background processing procedures are as follows:
using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;namespace Html5UploadTest{/// <summary>/// Summary description for Upload//// </summary>public class Upload : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";try{//Pick the parameters from the Request, note that the uploaded file is string in Request.Files name = context.Request["name"];int total = Convert.ToInt32(context.Request["total"]);int index = Convert.ToInt32(context.Request["index"]);var data = context.Request.Files["data"];//Save a shard to disk string dir = context.Request.MapPath("~/temp");string file = Path.Combine(dir, name + "_" + index);data.SaveAs(file);//If it is already the last shard, combine//Of course you can also use other methods such as directly writing to the corresponding location of the final file when receiving each shard, but you must control the concurrency to prevent file lock conflicts if (index == total){file = Path.Combine(dir, name);//byte[] bytes = null; using (FileStream fs = new FileStream(file, FileMode.OpenOrCreate)){for (int i = 1; i <= total; ++i){string part = Path.Combine(dir, name + "_" + i);//bytes = System.IO.File.ReadAllBytes(part);//fs.Write(bytes, 0, bytes.Length);//bytes = null;System.IO.File.Delete(part);fs.Close();}}}}}catch (Exception){throw;}//Return whether it is successful, simplified processing is done here //return Json(new { Error = 0 });}public bool IsReusable{get{return false;}}}}4. Of course, the background also needs some exception handling or power outage and transmission to be continued. . .
The above is the example code of BootStrap Progressbar that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!