HTML5 Datei-Upload mit ASP.NET

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.

image

   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>
Kommentare sind geschlossen