Caricamento file tramite trascinamento della selezione HTML5 in Asp.net

Sto tentando di caricare un file utilizzando il DnD e l'API file di HTML5. Non sono sicuro di come inviare i dati del modulo al server, ho provato a inviare utilizzando XMLHttpRequest ma non ha avuto successo. Questo quello che ho finora.Caricamento file tramite trascinamento della selezione HTML5 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); 
       }

So di avere un pulsante nell'interfaccia utente, a partire da ora, non sto usando. Ma come puoi vedere sto cercando di inviare una richiesta usando XMLHttpRequest. Qualcuno può suggerirmi come posso procedere ulteriormente. Ma il mio codice server non viene mai eseguito non sono sicuro che XMLHttpRequest abbia avuto successo.

fonte

2013-08-21 din

Jeezzz !! Funziona bene in IE, stavo testando in Chrome v 28 da pochi giorni. Nel file IE viene caricato bene. (testato più caricamenti di file). Quindi per farlo funzionare in Chrome ho dovuto apportare alcune modifiche. * errori commessi

in Chrome Durante il debug sul lato client ho trovato che var XHR = XMLHttpRequest() genera un errore, "costruttore oggetto dom non può essere chiamato come una funzione" Così sostituito con

var xhr = new XMLHttpRequest(); e rimosso xhr.setRequestHeader ("Tipo di contenuto", "multipart/form-data"); (Non sei sicuro del motivo per cui xhr.send() comporta che il valore di ispostback sia falso ??)
I commenti sono apprezzati. Link al codice completo: http://programmingusingdotnet.blogspot.com/2013/08/aspnet-drag-and-drop-file-uploads-using.html

fonte

2013-08-22 00:03:55 din

Il collegamento fornito mi ha aiutato molto! Grazie per quello. Inoltre, hai qualche possibilità di inviare file di immagine modificati (ridimensionati in realtà) con tag , su submit? In realtà ho una domanda attiva a riguardo: $ http://stackoverflow.com/questions/20681827/resize-image-and-then-upload-it-to-server-using-bootstrap-fileupload-plugin – ilter

Caricamento file tramite trascinamento della selezione HTML5 in Asp.net

risposta

Problemi correlati