Buduję aplikację internetową typu „przeciągnij i upuść” do przesłania za pomocą HTML5, upuszczam pliki do div i oczywiście pobieram obiekt dataTransfer, który daje mi FileList .
Teraz chcę usunąć niektóre pliki, ale nie wiem jak, ani czy to w ogóle możliwe.
Najlepiej po prostu usunąć je z FileList; Nie potrzebuję ich. Ale jeśli nie jest to możliwe, czy zamiast tego powinienem napisać kontrole w kodzie, który współdziała z FileList? Wydaje się to kłopotliwe.
javascript
html
drag-and-drop
filelist
Heilemann
źródło
źródło
Odpowiedzi:
Jeśli chcesz usunąć tylko kilka wybranych plików: nie możesz. Wersja robocza File API , do której utworzono łącze, zawiera notatkę:
Czytając trochę wersji roboczej HTML 5, natknąłem się na interfejsy API elementów wspólnych
input
. Wygląda na to, że możesz usunąć całą listę plików, ustawiającvalue
właściwośćinput
obiektu na pusty ciąg, na przykład:Przy okazji, artykuł Korzystanie z plików z aplikacji internetowych może być również interesujący.
źródło
length
Myślę, że tylko plik jest tylko do odczytu. Próbuję usunąć element ze złączem, w Chrome nie działa.To pytanie zostało już oznaczone jako odpowiedź, ale chciałbym podzielić się pewnymi informacjami, które mogą pomóc innym w korzystaniu z FileList.
Byłoby wygodnie traktować FileList jako tablicę, ale metody takie jak sort, shift, pop i slice nie działają. Jak sugerowali inni, możesz skopiować FileList do tablicy. Jednak zamiast używać pętli, istnieje proste rozwiązanie jednokreskowe do obsługi tej konwersji.
Przetestowano poprawnie w FF, Chrome i IE10 +
źródło
Array.from(fileDialog.files)
jest prostszefileDialog.files = fileBuffer
?Jeśli celujesz w wiecznie zielone przeglądarki (Chrome, Firefox, Edge, ale działa również w Safari 9+) lub możesz sobie pozwolić na polyfill, możesz zmienić FileList w tablicę, używając w
Array.from()
ten sposób:Wtedy łatwo jest obsługiwać tablicę
File
s jak każdą inną tablicę.źródło
fileArray
niefileList
.Ponieważ jesteśmy w dziedzinie HTML5, to jest moje rozwiązanie. Istota polega na tym, że przesyłasz pliki do Array zamiast pozostawiać je w FileList, a następnie za pomocą XHR2 wypychasz pliki do obiektu FormData. Przykład poniżej.
źródło
Znalazłem bardzo szybkie i krótkie obejście tego problemu. Przetestowane w wielu popularnych przeglądarkach (Chrome, Firefox, Safari);
Najpierw musisz przekonwertować FileList na Array
aby usunąć określony element, użyj tego
źródło
event.target.files
która nie jest połączona z danymi wejściowymi, więc nie może zmienić niczego oprócz zmiennej lokalnej.Wiem, że to stare pytanie, ale w związku z tym problemem zajmuje wysokie miejsce w wyszukiwarkach.
właściwości w obiekcie FileList nie można usunąć, ale przynajmniej w przeglądarce Firefox można je zmienić . Moim obejściem tego problemu było dodanie właściwości
IsValid=true
do tych plików, które przeszły sprawdzanie, iIsValid=false
do tych, które nie.następnie po prostu przeglądam listę, aby upewnić się, że tylko właściwości z
IsValid=true
są dodawane do FormData .źródło
Może istnieć bardziej elegancki sposób, ale oto moje rozwiązanie. Dzięki Jquery
Zasadniczo kasujesz wartość wejścia. Sklonuj go i umieść klona w miejscu starego.
źródło
To ekstrawaganckie, ale miałem ten sam problem, który rozwiązałem w ten sposób. W moim przypadku przesyłałem pliki za pośrednictwem żądania XMLHttp, więc mogłem opublikować sklonowane dane FileList poprzez dołączanie danych formularza. Funkcjonalność polega na tym, że możesz przeciągać i upuszczać lub wybierać wiele plików tyle razy, ile chcesz (ponowne wybranie plików nie spowoduje zresetowania sklonowanej listy plików), usunąć dowolny plik z (sklonowanej) listy plików i przesłać przez xmlhttprequest cokolwiek było pozostawione tam. To właśnie zrobiłem. To mój pierwszy post, więc kod jest trochę niechlujny. Przepraszam. Ach, i musiałem użyć jQuery zamiast $, jak to było w skrypcie Joomla.
Teraz HTML i style do tego. Jestem całkiem nowicjuszem, ale wszystko to działało i zajęło mi trochę czasu, zanim to rozgryzłem.
Style do tego. Musiałem oznaczyć niektóre z nich! Ważne, aby zastąpić zachowanie Joomla.
Mam nadzieję, że to pomoże.
źródło
Dzięki @Nicholas Anderson prosto i prosto, oto twój kod zastosowany i działający na moim kodzie za pomocą jquery.
HTML.
KOD JS
źródło
W Vue js:
źródło
Jeśli masz szczęście, że wysyłasz żądanie do bazy danych z plikami i masz pliki, które chcesz wysłać w swoim DOM
możesz po prostu sprawdzić, czy plik z listy plików jest obecny w Twoim DOM, a jeśli nie, po prostu nie wysyłaj tego elementu do de DB.
źródło
Możesz chcieć utworzyć tablicę i użyć jej zamiast listy plików tylko do odczytu.
Następnie prześlij do swojej listy zamiast wbudowanej listy. Nie jestem pewien kontekstu, w którym pracujesz, ale pracuję z wtyczką jquery, którą znalazłem i co musiałem zrobić, to pobrać źródło wtyczki i umieścić ją na stronie za pomocą
<script>
tagów. Następnie nad źródłem dodałem swoją tablicę, aby mogła działać jako zmienna globalna, a wtyczka mogła się do niej odwoływać.Potem była już tylko kwestia zamiany odniesień.
Myślę, że pozwoliłoby ci to również dodać przeciągnij i upuść, tak jak ponownie, jeśli wbudowana lista jest tylko do odczytu, to jak inaczej możesz umieścić upuszczone pliki na liście?
:))
źródło
FileList
obiekt domyReadWriteList
zmiennej, zmienia on jego typ zArray
naFileList
, więc nie jest to rozwiązanie.Po prostu zmieniam typ wejścia na tekst iz powrotem do pliku: D
źródło