รหัสการใช้งานสำหรับการอัปโหลดไฟล์เพื่อแสดงความคืบหน้าใน HTML5

ความคิดเห็น: ด้านล่างเราใช้ไฟล์คุณสมบัติใหม่ API ของ HTML 5 เพื่ออัปโหลดไฟล์และแสดงเปอร์เซ็นต์ของความคืบหน้าของไฟล์อัปโหลด ความตั้งใจเป็นเช่นนี้: เมื่อเลือกไฟล์ข้อมูลไฟล์ปัจจุบันจะปรากฏขึ้น

@using (html.beginform ("อัปโหลด", "home", formmethod.post, ใหม่ {enctype = "multipart/form-data",})))))))))))))))))))

-

<div>

<label for = "file">

อัพโหลดรูปภาพ: </label>

<input type = "file" multiple = "multiple" onChange = "fileselected ();" -

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

<อินพุต type = "ปุ่ม" value = "อัพโหลดอิมเมจ" />

</div>

<div>

</div>

-

JavaScript ที่เกี่ยวข้องมีดังนี้:

ฟังก์ชั่น fileselected () {

var file = document.getElementById ('fileToupload') ไฟล์ [0];

ถ้า (ไฟล์) {

var filesize = 0;

if (file.size> 1024 * 1024)

filesize = (math.round (file.size * 100 / (1024 * 1024)) / 100) .toString () + 'MB';

อื่น

filesize = (math.round (file.size * 100/1024) / 100) .toString () + 'kb';

document.getElementById ('filename'). innerhtml = 'ชื่อ:' + file.name;

document.getElementById ('filesize'). innerhtml = 'ขนาด:' + filesize;

document.getElementById ('fileType'). innerhtml = 'type:' + file.type;

-

-

ฟังก์ชั่น uploadfile () {

var fd = new FormData ();

fd.Append ("fileToupload", document.getElementById ('fileToupload') ไฟล์ [0]);

var xhr = ใหม่ xmlhttprequest ();

xhr.upload.addeventListener ("ความคืบหน้า", uploadprogress, false);

xhr.addeventListener ("โหลด", uploadcomplete, false);

xhr.addeventListener ("ข้อผิดพลาด", uploadfailed, false);

xhr.addeventListener ("abort", uploadcanceled, false);

xhr.open ("โพสต์", "บ้าน/อัปโหลด");

XHR.Send (FD);

-

ฟังก์ชั่น UploadProgress (EVT) {

if (evt.lengthcomputable) {

var percentcomplete = math.round (evt.loaded * 100 /evt.total);

document.getElementById ('progressNumber'). innerhtml = percentcomplete.toString () + '%';

-

อื่น {

document.getElementById ('progressNumber'). innerhtml = 'ไม่สามารถคำนวณได้';

-

-

ฟังก์ชั่น uploadcomplete (evt) {

/ * เหตุการณ์นี้จะเกิดขึ้นเมื่อเซิร์ฟเวอร์ส่งคำตอบกลับ */

การแจ้งเตือน (evt.target.responsetext);

-

ฟังก์ชั่น uploadfailed (evt) {

การแจ้งเตือน ("มีข้อผิดพลาดที่พยายามอัปโหลดไฟล์");

-

ฟังก์ชั่น uploadCanceled (evt) {

การแจ้งเตือน ("การอัปโหลดถูกยกเลิกโดยผู้ใช้หรือเบราว์เซอร์ลดการเชื่อมต่อ");

-

ด้านบนเป็น JavaScript ดั้งเดิมซึ่งดำเนินการฟังก์ชั่น fileselected ในเหตุการณ์ OnChange และดำเนินการฟังก์ชัน UploadFile ในปุ่มคลิก ที่นี่ใช้ XMLHTTTPREQUEST เพื่อใช้ไฟล์อัพโหลด AJAX โปรดทราบว่ารหัสสามารถทำงานใน Firefox 14 ได้ในปัจจุบันไม่สนับสนุน API ไฟล์ดังนั้นคุณสามารถเข้าร่วมได้ที่นี่ รหัสฝั่งเซิร์ฟเวอร์นั้นง่ายมาก:

Homecontroller ระดับสาธารณะ: คอนโทรลเลอร์

-

Public ActionResult Index ()

-

Return View ();

-

/// <summary>

/// อัปโหลดไฟล์ที่ระบุ

/// </summary>

/// <param> ไฟล์ </param>

/// <returns> ActionResult </returns>

[httppost]

Public ActionResult Upload (httppostedFileBase [] filetoupload)

-

foreach (ไฟล์ httppostedfilebase ใน filetoupload)

-

String path = system.io.path.combine (server.mappath ("~/app_data"), system.io.path.getFilename (file.filename));

file.saveas (พา ธ );

-

ViewBag.Message = "ไฟล์) อัปโหลดสำเร็จ";

return redirecttoaction ("index");

-

-

ผู้แต่ง: Petter Liu