<input type="file"/> Plik i jego ścieżka jest czyszczona po kliknięciu Anuluj w oknie "wybierz plik" w chrome, w pliku FF i IE pozostaje nietknięta po naciśnięciu Anuluj. Czy istnieje sposób, aby zmienić to zachowanie w chrome?typ wejścia = "plik", czyszczenie pliku po kliknięciu Anuluj w chrome
Jest to odpowiedź na twoje pytanie nie można nawet wykryć kiedy przycisk cancel kliknięciu:
Jest to niemożliwe ze względów bezpieczeństwa, nie można ustawić wartości wejścia pliku w js – Powerslave
https://jsfiddle.net/dqL97q0b/1/
Oto obejść, tak że Chrome nie może Usuń użytkownicy istniejący plik po anulowaniu jest wciśnięty.
Kod Uwagi: To sprawia, że klon elementu Dom, gdy użytkownik otwiera wybieracz plików, jeśli jest już wybrany plik. Następnie, jeśli użytkownik kliknie przycisk Anuluj w chrome, uruchomi zmianę odbiornika zdarzeń, a wartość będzie "", więc w tym konkretnym przypadku usuwam teraz pusty wybieracz plików i przywracam klon.
Uwaga: każdy element wyboru pliku Dom Element potrzebuje unikalnego identyfikatora, aby klon mógł być prawidłowo zapisany i pobrany.
Uwaga: Większość kodu jest tylko zalogowaniu, aby pokazać, jak to wszystko działa, a konkretnie chciałem podkreślić, że w przypadku korzystania z detektorów zdarzeń inline w DOM element taki jak onclick = „fileClicked (event)” następnie nie musisz ponownie dołączać detektorów zdarzeń do klonu.
<!doctype html><html><head></head><body>
<h2>Fix for Chrome Removing File when 'cancel' clicked</h2>
Upload Image: <input id="imageUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)">
<br/><br/>
<label for="videoUpload">Upload Video:</label> <input id="videoUpload" type="file" onclick="fileClicked(event)" onchange="fileChanged(event)">
<br/><br/>
<div id="log"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
//This is All Just For Logging:
var debug = true;//true: add debug logs when cloning
var evenMoreListeners = true;//demonstrat re-attaching javascript Event Listeners (Inline Event Listeners don't need to be re-attached)
if (evenMoreListeners) {
var allFleChoosers = $("input[type='file']");
addEventListenersTo(allFleChoosers);
function addEventListenersTo(fileChooser) {
fileChooser.change(function (event) { console.log("file(#" + event.target.id + ") : " + event.target.value.split("\\").pop()) });
fileChooser.click(function (event) { console.log("open(#" + event.target.id + ")") });
}
}
var clone = {};
// FileClicked()
function fileClicked(event) {
var fileElement = event.target;
if (fileElement.value != "") {
if (debug) { console.log("Clone(#" + fileElement.id + ") : " + fileElement.value.split("\\").pop()) }
clone[fileElement.id] = $(fileElement).clone(); //'Saving Clone'
}
//What ever else you want to do when File Chooser Clicked
}
// FileChanged()
function fileChanged(event) {
var fileElement = event.target;
if (fileElement.value == "") {
if (debug) { console.log("Restore(#" + fileElement.id + ") : " + clone[fileElement.id].val().split("\\").pop()) }
clone[fileElement.id].insertBefore(fileElement); //'Restoring Clone'
$(fileElement).remove(); //'Removing Original'
if (evenMoreListeners) { addEventListenersTo(clone[fileElement.id]) }//If Needed Re-attach additional Event Listeners
}
//What ever else you want to do when File Chooser Changed
}
</script>
</body></html>Proste, ale skuteczne rozwiązanie: zachować odniesienie do pliku w zmiennej. Za każdym razem, gdy zdarzenie Zmiana wejścia jest zwolniony sprawdzić:
if(input.files[0]) // truthy, falsey
{
var file = input.files[0];
}
Więc file będzie zawierał najnowsze wybrany plik i gdy użytkownik otwiera okno ale zaprzepaszczone odniesienie plik nie zostanie zmieniona i nadal zawiera uprzednio wybrany plik.
Czy możesz stworzyć skrzypce i pokazać nam dokładnie, co masz na myśli? Dziękuję :) – GFP