1. Implementieren Sie zunächst große Dateien hochladen . Wenn es sich um ein paar Megabyte oder Dutzende von Megabyte handelt, verwenden Sie die grundlegende Upload -Methode. Wenn es sich jedoch um ein großes Datei -Upload handelt, verwenden Sie am besten das Shard -Upload. Hier verwende ich den Client hauptsächlich, um die Sharded -Daten im Serversegment zu lesen und dann zu speichern. Nach dem Lesen des Serversegments werden die Sharded -Daten kombiniert.
2. Der Front-End-Code lautet wie folgt:
<%@ 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.4.cs" rel = "styleSheet"/> <script src = "bootstrap-progressbar/bootstrap-progressbar.jjs" href = "jQueryui/jQuery-ui.css" rel = "stylesheet"/> <script src = "jQueryui/jQuery-ui.js"> </script>-%> <Script> Funktion uploadFile () {$ ("#Upload"). Attr ("Diansabled", "DISABTELS"); // Dateiobjekt filenum = $ ("#Datei") [0] .files [0] .Length, name = Datei.Name, // Dateiname size = file.size, // Gesamtgröße Succees = 0; var Shardsize = 2 * 1024 * 1024, // ShardCount = math.ceil (Größe /Shardsize); // Gesamtzahl der Slices $ ('. Progress .Progress-Bar'). Attr ('Data-transitionGoal', 0) .ProgressBar ({display_text: 'fill'}); für (var i = 0; i <Shardcount; ++ i) {// Die Start- und Endposition von jeder Slice-Start = i * shardcount, end = math. Formdata ist eine neue VAR -Form, die zu HTML5 hinzugefügt wurde. = neuer FormData (); Form.Append ("Daten", file.slice (start, enden)); // Slice -Methode wird verwendet, um einen Teil des Dateiformulars auszuschneiden.Append ("Name", Name); Form.Append ("Total", ShardCount); // Gesamtzahl der Slices Form.Append ("Index", i + 1); // Die aktuelle Anzahl der Slices lautet // ajax $ $ .ajax ({url: "upload.ashx", Typ: "post", Daten: Form, async: true, // Async processData: false, // Es ist sehr wichtig, Jquery nicht zu verarbeiten. {++ erfolgreich; $ ("#output"). text (Erfolg + " /" + shardCount); var Prozent = ((Erfolg / ShardCount) .Tofixed (2)) * 100; UpdateProgress (Prozent); if (Erfolg == SHARDCOUNT) {$ ("#Upload". {var progressBarwidth = Prozent * $ element.width ()/100; $ element.find ('div'). Animate ({width: progressBarwidth}, 500) .html (Prozent + "%");} // $ (Dokument) .Ready () () {// $ ('. Fortschritt. }); //}; onclick = "uploadFile ();"> Upload </button> <span id = "output" style = "font-size: 12px"> Warten </span> <div> <div id = "progreshbar" rollen = "progresorBar" Data-transitiongoal = "3. Die allgemeinen Hintergrundverarbeitungsverfahren sind wie folgt:
Verwenden von System; system.collectionss.generic; Verwendung von System.io; Verwendung von System.linq; Verwendung von System.web; Namespace html5UploadTest {/// <summary> // zusammen = "text/plain"; try {// Die Parameter aus der Anforderung auswählen, beachten Sie, dass die hochgeladene Datei in Request.Files name = context.request ["name"]; int total = convert.toint32 (context.Rext.Rext.Rext ["Total"]; Ein Shard to disk String Dir = context.request.Mappath ("~/temp"); String -Datei = Path.combine (DIR, Name + "_" + Index; Daten.Saveas (Datei); // Wenn es sich bereits um die letzte Shard -Schärfe handelt, die die letzte Shard -Last -Fehlverbots, bei der Sie den Index -Lokus direkt schreiben, müssen Sie sich bei jeder Shard -Lokalisierung befassen. Wenn Sie jeden Shard -Lokus, wenn Sie die Schlussabschlusspflicht haben, müssen Sie jeden Shard -Lokus. == Total) {file = path.combine (dir, name); // byte [] bytes = null; Verwenden Sie (fileStream fs = new FileStream (Datei, fileMode.openorcreate)) {für (int i = 1; i <= total; ++ i) {String Part = path.combine (Dir, Name + "_" + i); // bytes = system.io.file.readallytes (part); // fs.write (bytes, bytes); null;4. Natürlich benötigt der Hintergrund auch eine Ausnahmeregelung oder einen Stromausfall und eine Übertragung, um fortgesetzt zu werden. . .
Das obige ist der Beispielcode von Bootstrap ProgressBar, den ich Ihnen vorgestellt habe. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!