1. أولاً ، قم بتنفيذ تحميل الملفات الكبيرة . إذا كان هناك عدد قليل من ميغابايت أو عشرات ميغابايت ، فاستخدم طريقة التحميل الأساسية ، ولكن إذا كان تحميل ملف كبير ، فمن الأفضل استخدام تحميل Shard. أنا هنا أستخدم العميل بشكل أساسي لقراءة البيانات المحفوفة بالمخاطر إلى قطاع الخادم ، ثم حفظها. بعد قراءة قطاع الخادم ، يتم الجمع بين البيانات المحدودة.
2. الرمز الأمامي هو كما يلي:
<٪@ page language = "c#" autoeventwireup = "true" codeBeHind = "UploadTest2 شظايا </title> <script src = "scripts/jQuery-1.8.2.js"> </script> <link href = "bootstrap-progressbar/bootstrap-progressbar -3.3.3.4 src = "bootstrap-progressbar/bootstrap-progressbar.js"> </script> <٪-<link href = "jqueryui/jquery-ui.css" rel = "stylesheet"/> <script src = jqueryui/jquery-u {$ ("#upload"). attr ("upabled" ، "upabled") ؛ var file = $ ("#file") [0] .files [0] ، // file object fileNum = $ ("#file") [0] .files [0] ShardCount = Math.ceil (الحجم / shardsize) ؛ // إجمالي عدد الشرائح $ ('. progress .progress-bar'). attr ('data-transitionGoal' ، 0) .progressBar ({display_text: 'fill'}) ؛ for (var i = 0 ؛ i <shardcount ؛ ++ i) {// حساب المواقع البدء والنهاية في كل shards. نموذج ، FormData هو نموذج VAR جديد تمت إضافته إلى HTML5. = جديد formData () ؛ Form.Append ("Data" ، file.slice (start ، end)) ؛ // يتم استخدام طريقة الشريحة لقطع جزء من File Form.Append ("name" ، name) ؛ Form.Append ("Total" ، ShardCount) ؛ // إجمالي عدد الشرائح form.append ("index" ، i + 1) ؛ . {++ تنجح ؛ $ ("#الإخراج"). النص (sustaust + " /" + shardcount) ؛ var ٪ = ((success / shardcount) .Tofixed (2)) * 100 ؛ updateprogress (٪) ؛ if (success == shardcount) {$ ("#upload"). lexveattr (adabled ") ؛ ProgressBarWidth = في المئة * $ element.width ()/100 ؛ $ element.find ('div'). ANIMATE ({width: progressBarWidth} ، 500) .html (٪ + "٪") ؛} // $ (document) .Ready (function () {// $ ('. progress. progress. }) ؛ //) onClick = "UploadFile () ؛"> upload </utton> <span id = "output" style = "font-size: 12px"> Waiting </span> <viv> <div id = "progressBar" al = "progressBar" data-transitionGoal = "" ""3. إجراءات معالجة الخلفية العامة هي كما يلي:
باستخدام النظام ؛ باستخدام system.collections.generic ؛ باستخدام system.io ؛ باستخدام system.linq ؛ باستخدام system.web ؛ مساحة الاسم html5uploadtest {/// <summary> /// الوصف الملخص لـ Upload /// </summary> تحديث الفئة العامة: ihttphandler {public void processrequest ( سياق) {context.response.contentType = "text/plain" ؛ حاول {// اختر المعلمات من الطلب ، لاحظ أن الملف المحمّل هو سلسلة في request.files name = context.request ["name"] context.request.files ["data"] ؛ // حفظ shard إلى سلسلة diR = context.request.mappath ("~/temp") يجب التحكم في التزامن لمنع تعارضات قفل الملف إذا (index == total) {file = path.combine (dir ، name) ؛ // byte [] bytes = null ؛ باستخدام (filestream fs = new fileStream (ملف ، fileMode.openorCreate))) {for (int i = 1 ؛ i <= total ؛ ++ i) {string part = path.combine (dir ، name + "_" + i) ؛ null ؛ system.io.file.delete (part) ؛ fs.close () ؛}}}}} catch (استثناء) {throw ؛} // إرجاع ما إذا كانت ناجحة ، يتم إجراء معالجة مبسطة هنا/4. بالطبع ، تحتاج الخلفية أيضًا إلى بعض معالجة الاستثناءات أو انقطاع التيار الكهربائي ونقلها. . .
ما سبق هو مثال رمز Bootstrap ProgressBar الذي قدمته لك. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!