首頁 > 開發者 > JavaScript
BootStrap Progressbar 實現大檔案上傳的進度條的執行個體代碼，bootstrap上傳進度條
1.首先實現大檔案上傳，如果是幾兆或者幾十兆的檔案就用基本的上傳方式就可以了，但是如果是大檔案上傳的話最好是用分區上傳的方式。我這裡主要是使用在用戶端進行分區讀取到伺服器段，然後儲存，到了伺服器段讀取完了之後將分區資料進行組合。
2.前端代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %><html lang="zh-CN"><head><meta charset="utf-8"><title>HTML5大檔案分區上傳樣本</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], //檔案對象fileNum = $("#file")[0].files[0].length,name = file.name, //檔案名稱size = file.size, //總大小succeed = 0;var shardSize = 2 * 1024 * 1024, //以2MB為一個分區shardCount = Math.ceil(size / shardSize); //總片數$('.progress .progress-bar').attr('data-transitiongoal', 0).progressbar({ display_text: 'fill' });for (var i = 0; i < shardCount; ++i) {//計算每一片的起始與結束位置var start = i * shardSize,end = Math.min(size, start + shardSize);//構造一個表單，FormData是HTML5新增的var form = new FormData();form.append("data", file.slice(start, end)); //slice方法用於切出檔案的一部分form.append("name", name);form.append("total", shardCount); //總片數form.append("index", i + 1); //當前是第幾片//Ajax提交$.ajax({url: "Upload.ashx",type: "POST",data: form,async: true, //非同步processData: false, //很重要，告訴jquery不要對form進行處理contentType: false, //很重要，指定為false才能形成正確的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();">上傳</button><span id="output" style="font-size: 12px">等待</span><div class="progress"><div id="progressBar" class="progress-bar" role="progressbar" data-transitiongoal=""></div></div></body></html>
3. 後台一般處理常式如下：
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{//從Request中取參數，注意上傳的檔案在Requst.Files中string name = context.Request["name"];int total = Convert.ToInt32(context.Request["total"]);int index = Convert.ToInt32(context.Request["index"]);var data = context.Request.Files["data"];//儲存一個分區到磁碟上string dir = context.Request.MapPath("~/temp");string file = Path.Combine(dir, name + "_" + index);data.SaveAs(file);//如果已經是最後一個分區，組合//當然你也可以用其它方法比如接收每個分區時直接寫到最終檔案的相應位置上，但要控制好並發防止檔案鎖衝突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 Json(new { Error = 0 });}public bool IsReusable{get{return false;}}}}
4.當然了後台還需要一些異常處理或者斷電續傳的工作要做，待續。。。
以上所述是小編給大家介紹的BootStrap Progressbar 實現大檔案上傳的進度條的執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
