Manches geht viel einfacher als man glaubt. File Upload ist eine übliche Aufgabe in Web-Anwendungen und das klappt super. Eine begeisternde Kurz-Beschreibung.
Bisher habe ich für einen Dateiupload immer einen ASHX Handler geschrieben. Braucht man aber nicht, klappt auch mit einer einfachen aspx Seite.
1: Imports System.IO
2: Public Class upload
3: Inherits System.Web.UI.Page
4: Protected Sub Page_Load(ByVal sender As Object,
ByVal e As System.EventArgs) Handles Me.Load
5: If IsPostBack Then
6: UploadFile(sender, e)
7: End If
8: End Sub
9: Protected Sub UploadFile(sender As Object, a As EventArgs)
10: Dim fc = Request.Files
11: For i = 0 To fc.Count - 1
12: Dim upload = fc(i)
13: Dim fn = Server.MapPath(".\daten\") + Path.GetFileName(fc(i).FileName)
14: upload.SaveAs(fn)
15: Next
16: End Sub
17: End Class
Der VB.NET-Code beschreibt sich eigentlich von selbst.
Für den Designteil werden zunächst die CSS-Regeln definiert. Es wird ein Bereich angelegt, der sich blau bzw. rot und blau verfärben soll.
1: <style>
2: #uploadzone {
3: width: 100px;
4: border: dashed thin #999;
5: height: 200px;
6: text-align: center;
7: }
8:
9: #uploadzone.hover {
10: border-color: #aaa;
11: background-color: #9cd0fc;
12: }
13:
14: #uploadzone.error {
15: border-color: #f00;
16: background-color: #faa;
17: }
18: </style>
19:
Im HTML-Teil wird nur ein DIV als Ziel für Drag und Drop definiert. Der kurze JavaScript-Teil dient zum Registrieren des Drop Events und für die Prüfung der File-API-Fähigkeiten.
1: <form id="form1" runat="server" enctype="multipart/form-data">
2: <div id="uploadzone">Datei Drag&Drop</div>
3: </form>
4: <script>
5: if (window.File && window.FileList && window.FileReader) {
6: var z = document.getElementById('uploadzone');
7: z.addEventListener('dragover', handleDragOver, false);
8: z.addEventListener('drop', handleDropFile, false);
9: }
10: else {
11: alert('Kein HTML5 File API Support!');
12: }
13: </script>
Ein relativ großer JavaScript-Block kümmert sich um die visuelle Interaktion und führt letztendlich den HTTP-Post aus.
1: <script>
2: var files;
3: function handleDragOver(event) {
4: event.stopPropagation();
5: event.preventDefault();
6: document.getElementById('uploadzone').setAttribute("class", 'hover');
7: }
8:
9: function handleDropFile(event) {
10: event.stopPropagation();
11: event.preventDefault();
12:
13: files = event.dataTransfer.files;
14:
15: var form = document.getElementById('form1');
16: var data = new FormData(form);
17:
18: for (var i = 0; i < files.length; i++) {
19: data.append(files[i].name, files[i]);
20: }
21: var xhr = new XMLHttpRequest();
22: xhr.onreadystatechange = function () {
23: if (xhr.readyState == 4) {
24: if (xhr.status == 200) {
25: alert("upload erfolgreich");
26: document.getElementById('uploadzone').
setAttribute("class", '');
27:
28: } else {
29: document.getElementById('uploadzone').
setAttribute("class", 'error');
30:
31: alert("fehlgeschlagen");
32: }
33: }
34: };
35: xhr.open('POST', "Upload");
36: xhr.send(data);
37: }
38: </script>