1. Tout d'abord, implémentez le téléchargement de fichiers grands . S'il s'agit de quelques mégaoctets ou dizaines de mégaoctets, utilisez la méthode de téléchargement de base, mais s'il s'agit d'un grand téléchargement de fichiers, il est préférable d'utiliser le téléchargement de Shard. Ici, j'utilise principalement le client pour lire les données Shardée au segment du serveur, puis l'enregistrer. Une fois le segment du serveur lu, les données fragnées sont combinées.
2. Le code frontal est le suivant:
<% @ Page Language = "C #" AutoEventWireup = "True" CodeBehind = "UploadTest2.Aspx.cs" INHERIRS = "HTML5UPLOADTEST.UPLOADTEST2" %> src = "scripts / jQuery-1.8.2.js"> </ script> <link href = "bootstrap-progressbar / bootstrap-progressbar-3.3.4.css" rel = "StylesSheet" /> <script src = "bootstrap-progressbar / link href = "jQueryUi / jQuery-Ui.css" rel = "Stylesheet" /> <script src = "jQueryui / jQuery-Ui.js"> </ script> -%> <script> fonction uploadFile () {$ ("# upload"). att ("Disabled", "Disabled"); var fichier = $ ("" #) [0]. // File Object Filenum = $ ("# file") [0] .Files [0] .length, name = file.name, // nom de fichier size = file.size, // taille totale succeed = 0; var shardize = 2 * 1024 * 1024, // partager shardCount = math.ceil (size / shardize); // Nombre total de tranches $ ('. Progress .progress-bar'). Att ('Data-TransitionGoal', 0) .ProgressBar ({display_text: 'fill'}); for (var i = 0; i <ShardCount; ++ i) {// Calculate the Start and End Posits of Every Slice Var Start = i * Shardsize, end = math.min (tail Form, FormData est un nouveau formulaire VAR ajouté à HTML5. = new formData (); form.append ("data", file.slice (start, end)); // La méthode Slice est utilisée pour couper une partie du fichier form.append ("name", nom); Form.APPEND ("Total", ShardCount); // Nombre total de tranches form.append ("index", i + 1); // Le nombre actuel de tranches est // ajax soumet $ .ajax ({url: "upload.ashx", type: "post", data: formulaire, async: true, // processData async: false, // il est très important de dire à jQuery de ne pas traiter le contenu de contenu: false, // c'est très important pour spécifier comme faux pour former le contenu correct de contenu: FACEUS {++ succeed; $ ("# output"). Texte (succéder + "/" + shardCount); var% = ((succeed / shardCount) .tofixed (2)) * 100; updateProgress (perced); if (succeed == shardCount) {$ ("# upload"). reposattr ("Disabled");} id {var ProgressBarWidth = pourcent * $ element.width () / 100; $ element.find ('div'). Animate ({width: ProgressBarWidth}, 500) .html (pour cent + "%");} // $ (document) .ready (function () {// $ ('. Progress .progress-Bar'). }); //}); fonction updatedProgress (pourcentage) {$ ('. Progress .Progress-bar'). att ('Data-TransitionGoal', pourcentage) .progressbar ({display_text: 'fill'});} </ script> </ head> <corps onClick = "uploadFile ();"> upload </ftont> <span id = "output" style = "font-size: 12px"> waying </span> <v> <div id = "ProgressBar" role = "ProgressBar" Data-TransitionGoal = ""> </div> </div> </ body> </html>3. Les procédures générales de traitement des antécédents sont les suivantes:
Utilisation du système; Utilisation de System.Collections.Generic; Utilisation de System.io; Utilisation de System.Linq; Utilisation de System.Web; Namespace Html5uploadTest {/// <summary> /// Résumé Description de la téléchargement //// </summary> Class Télécharge "Text / Plain"; Essayez {// Choisissez les paramètres de la demande, notez que le fichier téléchargé est une chaîne dans request.files name = context.request ["name"]; int total = convert.toint32 (context.request ["total"]); int index = convert.toint32 (context.request ["index"]; 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, nom); // byte [] bytes = null; Utilisation (FileStream fs = new FileStream (fichier, fileMode.OpenorCreate)) {for (int i = 1; i <= total; ++ i) {String part = path.combine (dir, name + "_" + i); // bytes = System.io.file.readallbytes (partie); // Fs.Write (bytes, 0, bytes.Lesty); null; System.io.file.delete (partie); fs.close ();}}}}} catch (exception) {throw;} // renvoie si elle est réussie, un traitement simplifié est effectué ici // return JSON (new {error = 0});} public Bool Isreusable {get {return false;}}}}}} Bool Isreusable {get {return false;}}}}}}4. Bien sûr, l'arrière-plan a également besoin d'une manipulation d'exceptions ou d'une panne de courant et d'une transmission à poursuivre. . .
Ce qui précède est l'exemple de code de la barre de progression de bootstrap que je vous ai présenté. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!