Kommentar: Im Folgenden verwenden wir die neue Feature -Datei -API von HTML 5, um Dateien hochzuladen und den Prozentsatz des Fortschritts von Upload -Dateien anzuzeigen. Die Absicht ist wie folgt: Wenn eine Datei ausgewählt ist, werden die aktuellen Dateiinformationen angezeigt.
Hier kombinieren wir ASP.NET MVC als Server und Sie können auch andere Serversprachen verwenden. Schauen wir uns das HTML dieses Snippets an:@use (html.beginForm ("Upload", "Home", formMethod.post, new {engTepe = "MultiPart/Form-Data",}))
{
<div>
<Label für = "Datei">
Bild hochladen: </label>
<Eingabe type = "Datei" multiple = "multiple" onchange = "fileSelected ();" />
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
<Eingabe type = "Taste" value = "Bild hochladen" />
</div>
<div>
</div>
}
Das zugehörige JavaScript lautet wie folgt:
Funktion fileselected () {
var file = document.getElementById ('fileToUPload'). Dateien [0];
if (Datei) {
var filesize = 0;
if (Datei.size> 1024 * 1024)
FileSize = (math.round (Datei.Size * 100 / (1024 * 1024)) / 100) .ToString () + 'mb';
anders
FileSize = (math.round (Datei.Size * 100/1024) / 100) .ToString () + 'KB';
document.getElementById ('Dateiname'). InnerHtml = 'Name:' + Datei.name;
document.GetElementById ('FileSize'). InnerHtml = 'Größe:' + FileSize;
document.getElementById ('Filetype'). InnerHtml = 'Typ:' + Datei.type;
}
}
Funktion uploadFile () {
var fd = new FormData ();
fd.append ("FileToUPload", document.getElementById ('FileToUPload'). Dateien [0]);
var xhr = new xmlhttprequest ();
XHR.Upload.AdDeVentListener ("Progress", UploadProgress, False);
XHR.AdDeVentListener ("Load", UploadComplete, False);
XHR.AdDeVentListener ("Fehler", UploadFailed, False);
xhr.addeventListener ("abort", UploadCanceled, False);
xhr.open ("post", "home/upload");
xhr.send (fd);
}
Funktion uploadProgress (evt) {
if (evt.length computable) {
var prozentComplete = math.round (evt.loaded * 100 /evt.total);
document.getElementById ('ProgressNumber'). InnerHtml = prozentComplete.toString () + '%';
}
anders {
document.getElementById ('ProgressNumber'). InnerHtml = 'kann nicht berechnet';
}
}
Funktion uploadComplete (evt) {
/ * Dieses Ereignis wird angehoben, wenn der Server eine Antwort zurücksendet */
alert (evt.target.responsetext);
}
Funktion uploadFailed (evt) {
ALERT ("Es gab einen Fehler, der versuchte, die Datei hochzuladen.");
}
Funktion uploadCanceled (evt) {
ALERT ("Der Upload wurde vom Benutzer abgebrochen oder der Browser hat die Verbindung fallen lassen.");
}
Das obige ist das native JavaScript, das die fileSelected -Funktion im OnChange -Ereignis ausführt und die UploadFile -Funktion auf der Schaltfläche Klick ausführt. Verwenden Sie hier XMLHTTPrequest, um die AJAX -Upload -Datei zu implementieren. Beachten Sie, dass der Code in Firefox 14 funktionieren kann. IE 9 unterstützt derzeit keine Datei -API, sodass Sie hier teilnehmen können. Der serverseitige Code ist sehr einfach:
Homecontroller der öffentlichen Klasse: Controller
{
öffentlicher ActionResult Index ()
{
return view ();
}
/// <summary>
/// lädt die angegebenen Dateien hoch.
/// </summary>
/// <PARAM> Die Dateien. </param>
/// <returns> actionResult </returns>
[Httppost]
öffentliches 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));
Datei.Saveas (Pfad);
}
Viewbag.message = "Datei (en) erfolgreich hochgeladen";
return reutirectToAction ("Index");
}
}
Autor: Petter Liu