suchen

Heim >Web-Frontend >H5-Tutorial >Implementierungscode zum Anzeigen des Fortschritts der HTML5-Upload-Dateien_HTML5-Tutorial-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:51:061562Durchsuche

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
Stellungnahme：
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
Vorheriger Artikel：So schreiben Sie eine HTML5-Erklärung, die mit den IE_html5-Tutorial-Fähigkeiten kompatibel istNächster Artikel：So schreiben Sie eine HTML5-Erklärung, die mit den IE_html5-Tutorial-Fähigkeiten kompatibel ist

In Verbindung stehende Artikel

Mehr sehen