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: PublicClass upload
3: Inherits System.Web.UI.Page
4: ProtectedSub Page_Load(ByVal sender AsObject,
ByVal e As System.EventArgs) HandlesMe.Load
5: If IsPostBack Then
6: UploadFile(sender, e)7: EndIf
8: EndSub
9: ProtectedSub UploadFile(sender AsObject, 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: EndSub
17: End Class
Der VB.NET Code beschreibt sich eigentlich von selbst.
Für den Design Teil, wird 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 Flle API Fähigkeiten.
1: <formid="form1"runat="server"enctype="multipart/form-data">
2: <divid="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>