Przesyłanie plików przy użyciu przeciągania i upuszczania HTML5 w Asp.net

Próbuję przesłać plik przy użyciu interfejsu DnD i interfejsu API HTML5. Nie jestem pewien, jak wysłać dane formularza do serwera, próbowałem wysłać przy użyciu XMLHttpRequest, ale nie powiodło się. To, co mam do tej pory.Przesyłanie plików przy użyciu przeciągania i upuszczania HTML5 w 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); 
       }

wiem, że mam przycisku w interfejsie użytkownika, jak na razie nie używam. Ale jak widzisz, próbuję wysłać żądanie za pomocą XMLHttpRequest. Czy ktoś może mi zasugerować, jak mogę dalej działać? Ale mój kod po stronie serwera nigdy nie zostanie wykonany, nie jestem pewien, czy XMLHttpRequest zakończyło się powodzeniem.

Źródło

2013-08-21 din

Jeezzz !! Działa dobrze w IE, testowałem w Chrome v28 od kilku dni. W pliku IE ładuje się dobrze. (testowane wielokrotne przesyłanie plików). Aby było to możliwe w Chrome, musiałem wprowadzić kilka zmian. * błędów popełnianych

w Chrome Podczas debugowania po stronie klienta i stwierdził, że var XHR = XMLHttpRequest() generuje błąd "dom obiekt konstruktor nie można nazwać jako funkcja" So zastąpił go

var xhr = new XMLHttpRequest(); i usunięto xhr.setRequestHeader ("Typ zawartości", "wieloczęściowy/formularz danych"); (Nie wiesz dlaczego, ale xhr.send() powoduje, że wartość ispostback jest fałszywa?)
Komentarze są mile widziane. Link do pełnego kodu: http://programmingusingdotnet.blogspot.com/2013/08/aspnet-drag-and-drop-file-uploads-using.html

Źródło

2013-08-22 00:03:55 din

Ten podany link bardzo mi pomógł! Dziękuję za to. Poza tym, czy masz jakieś szanse na przesłanie zmodyfikowanych (zmodyfikowanych) plików graficznych za pomocą znacznika ? Mam rzeczywiście aktywne pytanie: $ http://stackoverflow.com/questions/20681827/resize-image-and-then-upload-it-to-server-using-bootstrap-fileupload-plugin – ilter

Przesyłanie plików przy użyciu przeciągania i upuszczania HTML5 w Asp.net

Odpowiedz

Powiązane problemy