Przeciąganie i przesyłanie plików przeciągnij

Question

Tak więc staram się znaleźć to, czego szukam i jak je wdrożyć.

Mam podstawowy program do przesyłania plików PHP, w którym użytkownik naciska przycisk niestandardowego przesyłania, wybiera plik, a następnie używa JS, sprawdza, czy nastąpiła zmiana (np. Użytkownik wybiera plik), a następnie przesyła formularz który ładuje obraz w porządku.

Co chcę teraz, to przeciągnij & upuść, aby przesłać obszar. Użytkownik może więc przeciągnąć obraz z eksploratora plików i upuścić go w wyznaczonym miejscu (a nie na całą stronę), a następnie po usunięciu tego obrazu, aby formularz automatycznie przesłał obraz i użył tego samego przetwarzania PHP.

Czy to możliwe i realistyczne?

Answer 1

Jest to absolutnie realistyczne i możliwe bez użycia wtyczki stron trzecich.

Poniższe fragmenty powinny dać wyobrażenie, jak to może działać:

Opadowej obszar

$(".drop-files-container").bind("drop", function(e) { 
    var files = e.originalEvent.dataTransfer.files; 
    processFileUpload(files); 
    // forward the file object to your ajax upload method 
    return false; 
}); 

processFileUpload() - metoda:

function processFileUpload(droppedFiles) { 
     // add your files to the regular upload form 
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped 
     for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped 
      uploadFormData.append("files[]",droppedFiles[f]); // adding every file to the form so you could upload multiple files 
     } 
    } 

// the final ajax call 

     $.ajax({ 
     url : "upload.php", // use your target 
     type : "POST", 
     data : uploadFormData, 
     cache : false, 
     contentType : false, 
     processData : false, 
     success : function(ret) { 
       // callback function 
     } 
     }); 

} 

Przykładowy formularz:

<form enctype="multipart/form-data" id="yourregularuploadformId"> 
    <input type="file" name="files[]" multiple="multiple"> 
</form> 

Możesz użyć czegoś takiego jak punktu wyjścia. Wsparcie przeglądarka to można znaleźć tutaj http://caniuse.com/#feat=xhr2

Oczywiście można dodawać żadnych dodatków, które chcesz jak pasek postępu, podgląd, animacji ...

Answer 2

Sprawdź tę wtyczkę jQuery! Z Ajax przesyłanie plików i więcej: Upload widget http://blueimp.github.com/jQuery-File-Upload/

pliku z wielokrotnego wyboru plików, przeciągnij & upuść, barów postępy i podgląd obrazów dla jQuery. Obsługuje między-domenowe, porcjowane i wznawiane ładowanie plików oraz zmianę rozmiaru obrazu po stronie klienta. Działa z każdą platformą po stronie serwera (PHP, Python, Ruby on Rails, Java, Node.js, Go itp.), Która obsługuje standardowe przesyłanie plików formularzy HTML.