Rumah >hujung hadapan web >Tutorial H5 >Kod pelaksanaan untuk memaparkan kemajuan fail muat naik HTML5_html5 kemahiran tutorial
Kod pelaksanaan untuk memaparkan kemajuan fail muat naik HTML5_html5 kemahiran tutorial
- WBOYasal
- 2016-05-16 15:51:061542semak imbas
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"}))
{
id="fileToUpload " multiple="multiple" onchange="fileSelected();" />
< ;div id="fileSize">
}
Javascript yang berkaitan adalah seperti ini:
Salin kod
Kodnya adalah seperti berikut:
if (file.size > 1024 * 1024)
fail fungsiSelected() { fail var = document.getElementById('fileToUpload').files[0]; jika (fail) {
var fileSize = 0; 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() 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
{
{
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");