<input type="file"/> Il file e il percorso vengono cancellati dopo aver fatto clic su Annulla nella finestra modale 'scegli file' in chrome, in FF e IE il file rimane intatto dopo aver premuto cancel. C'è un modo per cambiare questo comportamento in chrome?tipo di input = "file", cancellando il file dopo aver fatto clic su cancel in chrome
questa è la risposta alla tua domanda non è possibile anche rilevare quando il pulsante cancel si fa clic:
Per motivi di sicurezza non è possibile impostare il valore del file di input in js – Powerslave
https://jsfiddle.net/dqL97q0b/1/
Ecco un lavoro in giro, in modo che Chrome non può remove il file esistente degli utenti quando viene premuto cancel.
Note sul codice: Questo rende un clone dell'elemento Dom quando l'utente apre il selettore file se è già selezionato un file. Quindi, se l'utente fa clic su Annulla in Chrome, attiva la modifica Event Listener e il valore sarà "", quindi in quel caso specifico rimuovo il selettore di file ora vuoto e ripristino il clone.
Nota: ogni elemento Dom chooser richiede un ID univoco, in modo che il clone possa essere memorizzato e richiamato correttamente.
Nota: La maggior parte del codice è solo la registrazione, per mostrare come funzionano le cose, in particolare ho voluto sottolineare che se si utilizzano i listener di eventi in linea nella Dom elemento come onclick = "fileClicked (evento)" poi non è necessario ricollegare i listener di eventi al clone.
<!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>soluzione semplice ma efficace: mantenere un riferimento al file in una variabile. Ogni volta che l'evento di modifica dell'ingresso si è sparato controllare:
if(input.files[0]) // truthy, falsey
{
var file = input.files[0];
}
Così file conterrà l'ultimo file selezionato e quando l'utente apre la finestra di dialogo, ma annullato non verrà modificato il riferimento al file e contiene ancora la precedenza file selezionato.
Potresti creare un violino e mostrarci esattamente cosa intendi? Grazie :) – GFP