Datei-Upload mit HTML5 Drag & Drop in Asp.net

Ich versuche, eine Datei mit HTML5 DnD und Datei-API hochladen. Bin nicht sicher, wie man Formulardaten an den Server sendet, ich versuchte, mit XMLHttpRequest zu senden, aber war nicht erfolgreich. Das was ich bisher habe.Datei-Upload mit HTML5 Drag & Drop in Asp.net

<body> 
     <form id="form1" runat="server" enctype="multipart/form-data">   
      <br /> 
      <div id="drop_area">Drop files here</div> <br /> 
      <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button"/> 
     </form> 
    </body> 

    <script> 
      if (window.File && window.FileList && window.FileReader) { 
       var dropZone = document.getElementById('drop_area'); 
       dropZone.addEventListener('dragover', handleDragOver, false); 
       dropZone.addEventListener('drop', handleDnDFileSelect, false); 
      } 
      else { 
       alert('Sorry! this browser does not support HTML5 File APIs.'); 
      } 
      </script> 
    var files; 
      function handleDragOver(event) { 
       event.stopPropagation(); 
       event.preventDefault(); 
       var dropZone = document.getElementById('drop_zone'); 
       dropZone.innerHTML = "Drop now"; 
      } 

      function handleDnDFileSelect(event) { 
       event.stopPropagation(); 
       event.preventDefault(); 

       /* Read the list of all the selected files. */ 
       files = event.dataTransfer.files; 

       /* Consolidate the output element. */ 
       var form = document.getElementById('form1'); 
       var data = new FormData(form); 

       for (var i = 0; i < files.length; i++) { 

        data.append(files[i].name, files[i]); 
       } 

       var xhr = XMLHttpRequest(); 
       xhr.open("POST", "Upload.aspx"); //Wrong ? not sure. 
       xhr.setRequestHeader("Content-type", "multipart/form-data"); 
       xhr.send(data);     
      }

C#:

 HttpFileCollection fileCollection = Request.Files; 
       for (int i = 0; i < fileCollection.Count; i++) 
       { 
        HttpPostedFile upload = fileCollection[i]; 
        string filename ="c:\\Test\\" + upload.FileName; 
        upload.SaveAs(filename); 
       }

Ich weiß, dass ich eine Schaltfläche in der Benutzeroberfläche habe, ab sofort nicht verwenden. Aber wie Sie sehen können, versuche ich eine Anfrage mit XMLHttpRequest zu senden. Kann mir jemand vorschlagen, wie ich weitermachen kann? Aber mein serverseitiger Code wird nie ausgeführt. Ich bin mir nicht sicher, ob XMLHttpRequest erfolgreich war.

Quelle

2013-08-21 din

Jeezzz !! Es funktioniert gut in IE, ich habe in Chrome v 28 seit einigen Tagen getestet. In IE-Datei wird hochgeladen. (getestet mehrere Datei-Uploads). Damit es in Chrome funktioniert, musste ich einige Änderungen vornehmen. * Fehler gemacht

In Chrom Während clientseitige Debuggen fand ich, dass var xhr = XMLHttpRequest() einen Fehler wirft, So "Objektkonstruktor dom nicht als Funktion aufgerufen werden können" ersetzte es durch

var xhr = new XMLHttpRequest(); und entfernt xhr.setRequestHeader ("Inhaltstyp", "multipart/form-data"); (Nicht sicher, warum aber xhr.send() führt zu ispostback Wert zu falsch sein?)
Kommentare werden geschätzt. Link zum vollständigen code: http://programmingusingdotnet.blogspot.com/2013/08/aspnet-drag-and-drop-file-uploads-using.html

Quelle

2013-08-22 00:03:55 din

Der Link zur Verfügung gestellt hat mir sehr geholfen! Dank dafür. Auch, wenn Sie etwas über das Senden von modifizierten (tatsächlich geänderten) Bilddateien mit dem -Tag beim Senden bekommen? Ich habe tatsächlich eine aktive Frage dazu: $ http://stackoverflow.com/questions/20681827/resize-image-and-then-upload-it-to-server-using-bootstrap-fileupload-plugin – ilter

Datei-Upload mit HTML5 Drag & Drop in Asp.net

Antwort

Verwandte Themen