JQuery - Drag n Drop Files - Jak uzyskać informacje o pliku?

Question

Zainteresowany budowaniem własnego narzędzia do przesyłania plików drag'n'drop przy użyciu JQuery/AJAX/PHP.

Zasadniczo chcę pobrać plik, który użytkownicy mojej witryny mogą po prostu przeciągnąć plik ze swojego komputera do utworzonego div, a następnie załaduje plik do wybranego miejsca docelowego.

Chciałbym zbudować to od podstaw, a nie używać żadnych wtyczek, dzięki czemu można lepiej manipulować ograniczeń (typy plików, wielkość folderów docelowych, etc.)

przeczesywali google bez powodzenia, tylko wtyczki. Czy i tak może mnie skierować we właściwym kierunku?

UPDATE Ok, więc wymyśliłem, jak zrobić to, co chcę. Po prostu ustaw krycie pola wprowadzania danych na wartość 1, aby była ukryta, a nadal możesz przeciągnąć plik do tego obszaru ogólnego, a po kliknięciu pola tekstowego zostanie ono przechwycone. JEDNAKŻE, chciałbym wiedzieć, jak zwiększyć wysokość/szerokość w polu wejściowym pliku (wypróbowane podstawowe css w pliku, ale to tylko zwiększa rozmiar przycisku "przeglądaj", a nie rzeczywiste pole, w którym można upuścić plik. jakieś pomysły jak to zrobić? chcę zasadniczo duży kwadratowy div, który mówi „Kropla złożyć tutaj”. Więc muszę zmienić rozmiar pola wprowadzania.

Answer 1

można użyć HTML5 dragenter i dragleave wydarzenia stworzyć DropZone.
Następnie poprzez umieszczenie wejście plików wewnątrz zrzutowiska i ukrywanie go z CSS, możesz przesłać plik, gdy zdarzenie change do pożarów wejściowych, jak to

var dropzone = $("#dropzone"), 
    input = dropzone.find('input'); 

dropzone.on({ 
    dragenter : dragin, 
    dragleave : dragout 
}); 

input.on('change', drop); 

function dragin(e) { //function for drag into element, just turns the bix X white 
    $(dropzone).addClass('hover'); 
} 

function dragout(e) { //function for dragging out of element       
    $(dropzone).removeClass('hover'); 
} 

function drop(e) { 
    var file = this.files[0]; 
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove(); 

    // upload file here 
} 

FIDDLE

Answer 2

Dla zainteresowanych, znalazłem ten poradnik/demo być pomocne: http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/

Zasadniczo używa <span> na pokrycie pola domyślne wejściowego.

Answer 3

Po to, żeby zadzwonić, jak to robię w ciągu ostatnich kilku dni. Z tego co rozumiem, jeśli wiążę zdarzenie upuszczania za pośrednictwem jQuery, należy uzyskać dostęp do tego obiektu event.dataTransfer, przechodząc przez obiekt event.originalEvent w zdarzeniu dostarczonym przez jQuery.

przykład:

W tym wiążę się zarówno do dragover jak również drop zdarzeń, jak jest to konieczne, aby zapobiec jej wykonywania akcji domyślnej (stwierdzono, że rozwiązanie tutaj: Prevent the default action. Working only in chrome)

$('#dropzone').bind('dragover drop', function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    if (event.type == 'drop') { 
     console.log(event.originalEvent.dataTransfer.files); 
    } 
}); 

Wygląda też na to, że jeśli masz console.log()event.dataTransfer (lub event.originalEvent.dataTransfer), jego tablica plików jest pusta, to jest wskazane tutaj: event.dataTransfer.files is empty when ondrop is fired?

Aby lepiej odpowiedzieć na pytanie OPS (Właśnie zauważyłem resztę, a ja wiem, że to stary, ale ktoś może znaleźć to pomocne):

Moja implementacja jest w jQuery, więc mam nadzieję, że wszystko w porządku:

var files = []; 

// Attaches to the dropzone to pickup the files dropped on it. In mine this is a div. 
$("#dropzone").bind('dragover drop', function(event) { 
    // Stop default actions - if you don't it will open the files in the browser 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (e.type == 'drop') { 
     files.push(event.originalEvent.dataTransfer.files); 
    } 
}); 

// Attach this to a an input type file so it can grab files selected by the input 
$("#file-input").bind('change', function(event) { 
    files.push(event.target.files); 
}); 

// This is a link or button which when clicked will do the ajax request 
// and upload the files 
$("#upload-button").bind('click', function(event) { 
    // Stop the default actions 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (files.length == 0) { 
     // Handle what you want to happen if no files were in the "queue" on clicking upload 
     return; 
    } 

    var formData = new FormData(); 
    $.each(files, function(key, value) { 
     formData.append(key, value); 
    }); 

    $.ajax({ 
     url: 'upload-ajax', 
     type: 'POST', 
     data: formData, 
     cache: false, 
     dataType: 'json', 
     processData: false, // Don't process the files - I actually got this and the next from an SO post but I don't remember where 
     contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
     success: function(data, textStatus, jqXHR) { /* Handle success */ }, 
     error: function(jqXHR, textStatus, errorThrown) { /* Handle error */ } 
    }); 

}); 

Można również powiązać inne zdarzenia w zaakceptowanej odpowiedzi, aby uzyskać efekty, takie jak upuszczanie zrzutów, aby można je było zobaczyć (to jest na mojej liście zadań dla mojej biblioteki). Jest to jednak rdzeń rzeczywistego przesyłania plików ajax, którego używam.

Naprawdę nie mam wygodnego sposobu na sprawdzenie tego, ale to w istocie, jak to zrobiłem (zasadniczo wziąłem cały ten kod z biblioteki, którą robiłem i dostosowałem go do ogólnego kodu blokującego tutaj w łatwy do zrozumienia sposób). Mam nadzieję, że to pomaga niektórym osobom. Zaczynając od tego, naprawdę łatwo było dodać kolejną listę plików, z możliwością usuwania plików z kolejki, więc powinno to być całkiem dobrym punktem wyjścia.