Heim > Web-Frontend > H5-Tutorial > Hauptteil

Implementierungscode zum Anzeigen des Fortschritts der HTML5-Upload-Dateien_HTML5-Tutorial-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:51:06
Original
1516 Leute haben es durchsucht

Hier kombinieren wir Asp.net MVC als Server, Sie können auch andere Serversprachen verwenden. Schauen wir uns den HTML-Code dieses Fragments an:

Kopieren Sie den Code
Der Code lautet wie folgt:

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


< ;div id="fileSize">
"row"> ;
">

}


Das zugehörige Javascript sieht so aus:





Kopieren Code

Der Code lautet wie folgt:


function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) { var fileSize = 0; if (file.size > 1024 * 1024) fileSize = (Math.round(file.size * 100 / (1024 * 1024 )) / 100).toString () 'MB'; else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() 'KB'; .getElementById('fileName') .innerHTML = 'Name: ' file.name; innerHTML = 'Type: ' file .type;
}
function uploadFile() {
var fd = new FormData(
fd.append("fileToUpload", document. getElementById('fileToUpload').
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false); Load", uploadComplete, false) ;
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST" , „Home/Upload“); (evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() '%';
else {
document.getElementById ('progressNumber').innerHTML = 'Berechnung nicht möglich';
}
}
function uploadComplete(evt) {
/* Dieses Ereignis wird ausgelöst, wenn der Server eine Antwort zurücksendet */
alert(evt.target .responseText);
}
function uploadFailed(evt) {
alert("Beim Hochladen der Datei ist ein Fehler aufgetreten."}
function uploadCanceled(evt) {
alert("Der Upload wurde vom Benutzer abgebrochen oder der Browser hat die Verbindung unterbrochen.");


Das Obige ist die native Javascript-Funktion Das führt fileSelected im onchange-Ereignis aus. Nach dem Klicken auf die Schaltfläche wird die Funktion „uploadFile“ ausgeführt. Hier wird XMLHttpRequest zum Implementieren des Ajax-Uploads von Dateien verwendet. Beachten Sie, dass der Code in Firefox 14 funktioniert. IE 9 unterstützt die Datei-API derzeit nicht. Sie können hier teilnehmen. Der serverseitige Code ist sehr einfach:





Kopieren Sie den Code


Der Code lautet wie folgt:


public class HomeController : Controller
{
public ActionResult Index()
{
return View();
/// /// Lädt die angegebenen Dateien hoch.
///
;returns>ActionResult[HttpPost]
public ActionResult Upload(HttpPostedFileBase[] fileToUpload)
{
foreach (HttpPostedFileBase-Datei in fileToUpload)
{
string path = System.IO.Path.Combine (Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName));
file.SaveAs(path)
ViewBag.Message = "Datei(en) erfolgreich hochgeladen";
return RedirectToAction("Index"); } Autor: Petter Liu
Verwandte Etiketten:
Quelle:php.cn
Vorheriger Artikel:So schreiben Sie eine HTML5-Erklärung, die mit den IE_html5-Tutorial-Fähigkeiten kompatibel ist Nächster Artikel:HTML5-kompatible IE6-Strukturimplementierungscode_html5-Tutorialfähigkeiten
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage