简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
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
1475 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
Wo soll ich die CustomLog-Direktive in Apache platzieren? Ich verwende php:7.2-apachedocker. Ich muss das URL-Anmeldezugriffsprotokoll zur Gesundhei...
Aus 2024-04-06 22:03:59
0
1
990
So verwenden Sie Laravel-Komponenten mit Livewire-Lazy-Platzhaltern Ich möchte das Skelett meiner Laravel-Komponente in einen Livewire3-Platzhalter einfügen. ...
Aus 2024-04-06 20:02:10
0
2
543
Bei der Verwendung von opentbs zum Generieren von ODT-Dateien sind Probleme aufgetreten: Werte desselben Schlüssels werden in derselben Zeile statt in separaten Spalten angezeigt. Ich verwende eine Bibliothek namens OpenTbs, um ODT mit PHP zu erstellen. Ich verwende sie...
Aus 2024-04-06 20:18:18
0
1
483
Was sind die Best Practices für die Anzeige von Versionsinformationen in Webanwendungen? Ich entwickle eine Webanwendung. Was sind die Best Practices für die Anzeige von Versionsi...
Aus 2024-04-06 19:13:16
0
2
476
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！