Come rilevare input type = file "change" per lo stesso file?

Voglio lanciare un evento quando l'utente seleziona un file. In questo modo con l' .changeevento funziona se l'utente cambia il file ogni volta.

Ma voglio lanciare l'evento se l'utente seleziona di nuovo lo stesso file.

1. File di selezione utente A.jpg(evento attivato)
2. File di selezione utente B.jpg(evento attivato)
3. File di selezione dell'utente B.jpg(l'evento non si attiva, voglio che venga attivato)

Come posso farlo?

Puoi ingannarlo. Rimuovi l'elemento del file e aggiungilo nello stesso posto changedell'evento. Cancella il percorso del file rendendolo ogni volta modificabile.

Esempio su jsFiddle.

Oppure puoi semplicemente usare .prop("value", ""), vedi questo esempio su jsFiddle .

• jQuery 1.6+ prop
• Versioni precedenti attr

Se hai provato .attr("value", "")e non hai funzionato, non farti prendere dal panico (come ho fatto io)

fai .val("")invece invece e funzionerà bene

È possibile semplicemente impostare su null il percorso del file ogni volta che l'utente fa clic sul controllo. Ora, anche se l'utente seleziona lo stesso file, verrà attivato l'evento onchange .

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />

Utilizzare l'evento onClick per cancellare il valore dell'input target, ogni volta che l'utente fa clic sul campo. Ciò garantisce che l'evento onChange verrà attivato anche per lo stesso file. Ha funzionato per me :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

Utilizzando TypeScript

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Ho ottenuto che funzioni cancellando il valore di input del file su Click e quindi pubblicando il file su Exchange. Ciò consente all'utente di selezionare lo stesso file due volte di seguito e di avere ancora il fuoco dell'evento change da pubblicare sul server. Il mio esempio usa il plugin del modulo jQuery .

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})

Questo lavoro per me

<input type="file" onchange="function();this.value=null;return false;">

VueJs solution

<input
                type="file"
                style="display: none;"
                ref="fileInput"
                accept="*"
                @change="onFilePicked"
                @click="$refs.fileInput.value=null"
>

Ispirandomi a @braitsch ho usato quanto segue nel mio AngularJS2 input-file-component

<input id="file" onclick="onClick($event) onchange="onChange($event)" type="file" accept="*/*" />

export class InputFile {

    @Input()
    file:File|Blob;

    @Output()
    fileChange = new EventEmitter();

    onClick(event) {
        event.target.value=''
    }
    onChange(e){
        let files  = e.target.files;
        if(files.length){
            this.file = files[0];
        }
        else { this.file = null}
        this.fileChange.emit(this.file);
    }
}

Qui onClick(event)mi ha salvato :-)

Probabilmente la cosa più semplice che puoi fare è impostare il valore su una stringa vuota. Ciò lo costringe a "cambiare" il file ogni volta anche se lo stesso file viene nuovamente selezionato.

<input type="file" value="" />

Ecco la soluzione React-y che ho trovato che ha funzionato per me:

onClick={event => event.target.value = null}

Se non vuoi usare jQuery

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

Funziona bene in Firefox, ma per Chrome è necessario aggiungere this.value=null;dopo l'avviso.

Per impostazione predefinita, la proprietà value dell'elemento input è deselezionata dopo la selezione dei file se l'input ha più attributi. Se non si pulisce questa proprietà, l'evento "modifica" non verrà generato se si seleziona lo stesso file. È possibile gestire questo comportamento utilizzando l' multipleattributo.

<!-- will be cleared -->
<input type="file" onchange="yourFunction()" multiple/>
<!-- won't be cleared -->
<input type="file" onchange="yourFunction()"/>

Riferimento

Non puoi changeaccendere il fuoco qui (comportamento corretto, poiché nulla è cambiato). Tuttavia, potresti anche legare click... anche se questo potrebbe sparare troppo spesso ... non c'è molta via di mezzo tra i due però.

$("#fileID").bind("click change", function() {
  //do stuff
});

Crea per l'input un evento click e un evento change. L'evento click svuota l'input e l'evento change contiene il codice che si desidera eseguire.

Quindi l'evento click si svuota quando si fa clic sul pulsante di input (prima che si apra la finestra di selezione del file), pertanto l'evento change si attiverà sempre quando si seleziona un file.

$("#input").click(function() {
  $("#input").val("")
});

$("#input").change(function() {
  //Your code you want to execute!
});

<input id="input" type="file">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

È possibile utilizzare form.reset()per cancellare l' fileselenco di input del file . Ciò ripristinerà tutti i campi ai valori predefiniti, ma in molti casi potresti utilizzare solo l'input type = 'file' in un modulo per caricare comunque i file. In questa soluzione non è necessario clonare l'elemento e riagganciare nuovamente gli eventi.

Grazie a Philiplehmann

Mi sono imbattuto nello stesso problema, ho esaminato le soluzioni sopra ma non hanno avuto una buona spiegazione di ciò che stava realmente accadendo.

Questa soluzione che ho scritto https://jsfiddle.net/r2wjp6u8/ non fa molte modifiche nella struttura DOM, cambia solo i valori del campo di input. Dal punto di vista delle prestazioni dovrebbe essere leggermente migliore.

Link al violino: https://jsfiddle.net/r2wjp6u8/

<button id="btnSelectFile">Upload</button>

<!-- Not displaying the Inputfield because the design changes on each browser -->
<input type="file" id="fileInput" style="display: none;">
<p>
  Current File: <span id="currentFile"></span>
</p>
<hr>
<div class="log"></div>


<script>
// Get Logging Element
var log = document.querySelector('.log');

// Load the file input element.
var inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', currentFile);

// Add Click behavior to button
document.getElementById('btnSelectFile').addEventListener('click', selectFile);

function selectFile() {
  if (inputElement.files[0]) {
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    // Reset the Input Field
    log.innerHTML += '<p>Removing file: ' + inputElement.files[0].name + '</p>'
    inputElement.value = '';
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    log.innerHTML += '<hr>'
  }

  // Once we have a clean slide, open fiel select dialog.
  inputElement.click();
};

function currentFile() {
    // If Input Element has a file
  if (inputElement.files[0]) {
    document.getElementById('currentFile').innerHTML = inputElement.files[0].name;
  }
}

</scrip>

Pertanto, non è possibile accertarsi che stiano selezionando lo stesso file al 100% a meno che non si memorizzi ciascun file e lo si confronti a livello di codice.

Il modo in cui interagisci con i file (cosa fa JS quando l'utente "carica" ​​un file) è l' API di file HTML5 e JR FileReader .

https://www.html5rocks.com/en/tutorials/file/dndfiles/

https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser

Queste esercitazioni mostrano come acquisire e leggere i metadati (memorizzati come oggetto js) quando viene caricato un file.

Crea una funzione che attiva 'onChange' che leggerà-> store-> confronta i metadati del file corrente con i file precedenti. Quindi puoi attivare il tuo evento quando viene selezionato il file desiderato.

Credimi, ti aiuterà sicuramente!

// there I have called two `onchange event functions` due to some different scenario processing.

<input type="file" class="selectImagesHandlerDialog" 
    name="selectImagesHandlerDialog" 
    onclick="this.value=null;" accept="image/x-png,image/gif,image/jpeg" multiple 
    onchange="delegateMultipleFilesSelectionAndOpen(event); disposeMultipleFilesSelections(this);" />


// delegating multiple files select and open
var delegateMultipleFilesSelectionAndOpen = function (evt) {

  if (!evt.target.files) return;

  var selectedPhotos = evt.target.files;
  // some continuous source

};


// explicitly removing file input value memory cache
var disposeMultipleFilesSelections = function () {
  this.val = null;
};

Spero che questo possa aiutare molti di voi ragazzi.