Kod pelaksanaan untuk memaparkan kemajuan fail muat naik HTML5_html5 kemahiran tutorial

WBOY

Lepaskan： 2016-05-16 15:51:06

asal

1515 orang telah melayarinya

Di sini kami menggabungkan Asp.net MVC sebagai pelayan, anda juga boleh menggunakan bahasa pelayan lain. Mari lihat HTML serpihan ini:

Salin kod

Kodnya adalah seperti berikut:

@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" , id="form1"}))
{

Muat naik Imej: id="fileToUpload " multiple="multiple" onchange="fileSelected();" />

< ;div id="fileSize">

"row"> ;

}

Javascript yang berkaitan adalah seperti ini:

Salin kod

Kodnya adalah seperti berikut:

fail fungsiSelected() { fail var = document.getElementById('fileToUpload').files[0]; jika (fail) {

var fileSize = 0;

if (file.size > 1024 * 1024)

fileSize = (Math.round(file.size * 100 / (1024 * 1024) )) / 100).toString () 'MB';
lain
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() 'KB'; .getElementById('fileName') .innerHTML = 'Nama: ' file.name;
document.getElementById('fileSize').innerHTML = 'Saiz: ' fileSize; innerHTML = 'Type: ' file .type;
}
}
function uploadFile() {
var fd = new FormData();fd.append("fileToUpload", document. getElementById('fileToUpload').
var xhr = new XMLHttpRequest(); muat", muat naikLengkap, palsu) ;
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST" , "Home/Upload") ;
xhr.send(fd);
}
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round (evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() '%';
}
else {
document.getElementById ('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* Peristiwa ini timbul apabila pelayan menghantar semula respons */
alert(evt.target .responseText);
}
function uploadFailed(evt) {
alert("Terdapat ralat semasa cuba memuat naik fail."
}
function uploadCanceled(evt) {
alert("Muat naik telah dibatalkan oleh pengguna atau pelayar memutuskan sambungan."); yang melaksanakan failSelected dalam acara onchange , selepas mengklik butang, fungsi uploadFile dilaksanakan Di sini, XMLHttpRequest digunakan untuk melaksanakan fail muat naik ajax. Ambil perhatian bahawa kod akan berfungsi dalam Firefox 14, IE 9 tidak menyokong api fail pada masa ini, anda boleh mengambil bahagian di sini. Kod sebelah pelayan adalah sangat mudah:

Salin kod

Kodnya adalah seperti berikut:

Pengawal Rumah kelas awam : Pengawal
{

Indeks ActionResult()
{
Paparan pulangan();
}

/// /// Memuat naik fail yang ditetapkan ./// ;returns>ActionResult[HttpPost] public ActionResult Upload(HttpPostedFileBase[] fileToUpload) { foreach (HttpPostedFileBase file) System.IO.Path.Combine (Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName)); ViewBag.Message = "Fail(s) berjaya dimuat naik"; kembali RedirectToAction("Index");

Label berkaitan：

上传文件

sumber：php.cn

Artikel sebelumnya：Cara menulis perisytiharan HTML5 bahawa ia serasi dengan kemahiran tutorial IE_html5 Artikel seterusnya：html5 serasi kod pelaksanaan struktur IE6_html5 kemahiran tutorial

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang