webentwicklung-frage-antwort-db.com.de

Wie erkenne ich, dass der Typ "input" = "change" für dieselbe Datei ist?

Ich möchte ein Ereignis auslösen, wenn der Benutzer eine Datei auswählt. Mit .change event funktioniert es, wenn der Benutzer die Datei jedes Mal ändert.

Ich möchte das Ereignis jedoch auslösen, wenn der Benutzer dieselbe Datei erneut auswählt.

  1. Benutzerauswahldatei A.jpg (Ereignis wird ausgelöst)
  2. Benutzerauswahldatei B.jpg (Ereignis wird ausgelöst)
  3. Benutzerauswahldatei B.jpg (Ereignis wird nicht ausgelöst, ich möchte, dass es ausgelöst wird)

Wie kann ich es tun?

77
Gadonski

Sie können es betrügen. Entfernen Sie das Dateielement und fügen Sie es an derselben Stelle im change-Ereignis hinzu. Dadurch wird der Dateipfad gelöscht, sodass er jedes Mal geändert werden kann.

Beispiel für jsFiddle.

Oder Sie können einfach .prop("value", "") verwenden, siehe dieses Beispiel auf jsFiddle .

  • jQuery 1.6+ prop
  • Frühere Versionen attr
58
BrunoLM

Wenn Sie .attr("value", "") ausprobiert haben und nicht funktionierten, geraten Sie nicht in Panik

mach einfach stattdessen .val("") und wird gut funktionieren

61
Wagner Leonardi

Ich habe dieses Problem gelöst, indem ich den Dateieingabewert onClick löschte und dann die Datei onChange poste. Auf diese Weise kann der Benutzer dieselbe Datei zweimal hintereinander auswählen und trotzdem das Änderungsereignisfeuer auf den Server senden. Mein Beispiel verwendet das das jQuery-Formular-Plugin .

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

Sie können einfach den Dateipfad auf null setzen, wenn der Benutzer auf das Steuerelement klickt. Auch wenn der Benutzer dieselbe Datei auswählt, wird das Ereignis onchange ausgelöst.

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

Diese Arbeit für mich

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

Verwenden Sie das onClick-Ereignis, um den Wert der Zieleingabe zu löschen, wenn der Benutzer auf das Feld klickt. Dadurch wird sichergestellt, dass das onChange-Ereignis auch für dieselbe Datei ausgelöst wird. Arbeitete für mich :) 

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

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

TypeScript verwenden

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

Standardmäßig wird die value-Eigenschaft des Eingabeelements nach der Auswahl von Dateien gelöscht, wenn die Eingabe mehrere Attribute hat. Wenn Sie diese Eigenschaft nicht bereinigen, wird das Ereignis "change" nicht ausgelöst, wenn Sie dieselbe Datei auswählen. Sie können dieses Verhalten mit dem Attribut multiple verwalten.

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

Referenz

2
Pulkit Aggarwal

Inspirierend von @braitsch habe ich folgendes in meinem AngularJS2 verwendet 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);
    }
}

Hier hat mich die onClick(event) gerettet :-)

1
MKJ

Wenn Sie jQuery nicht verwenden möchten

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

Es funktioniert gut in Firefox, aber für Chrome müssen Sie nach der Warnung this.value=null; hinzufügen.

1
elshnkhll

Am einfachsten ist es wahrscheinlich, den Wert auf eine leere Zeichenfolge zu setzen. Dadurch wird die Datei jedes Mal geändert, auch wenn dieselbe Datei erneut ausgewählt wird.

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

1
Curt

Sie können change hier nicht in Brand setzen (korrektes Verhalten, da sich nichts geändert hat). Sie könnten jedoch auch click binden ... obwohl dies zu - oft feuern kann ... es gibt jedoch nicht viel Mittelweg zwischen den beiden.

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

Ich bin auf dieselbe Frage gestoßen, ich habe mir die oben genannten Lösungen angesehen, aber sie bekamen keine gute Erklärung dafür, was wirklich geschah. 

Bei dieser Lösung habe ich https://jsfiddle.net/r2wjp6u8/ geschrieben, und es werden keine Änderungen in der DOM-Struktur vorgenommen. Vom Leistungsaspekt her sollte es etwas besser sein.

Link zur Geige: 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>
0
Ballpin

VueJs Lösung

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

Erstellen Sie für die Eingabe ein Klickereignis und ein Änderungsereignis. Das Ereignis click leert die Eingabe und das Ereignis change enthält den Code, den Sie ausführen möchten.

Wenn Sie also auf die Schaltfläche "Eingabe" klicken (bevor das Fenster "Datei auswählen" geöffnet wird), wird das Ereignis "Ändern" immer ausgelöst, wenn Sie eine Datei auswählen.

$("#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>
0
hoi ja

Sie können form.reset() verwenden, um die files list.__ der Dateieingabe zu löschen. Dadurch werden alle Felder auf die Standardwerte zurückgesetzt. In vielen Fällen verwenden Sie jedoch möglicherweise nur den Eingabetyp = 'file' in einem Formular, um Dateien trotzdem hochzuladen ..__ Bei dieser Lösung ist es nicht erforderlich, das Element zu klonen und die Ereignisse erneut anzuhängen.

Danke an philiplehmann

0
Rui Nunes

Es gibt also keine Möglichkeit, zu 100% sicherzustellen, dass sie dieselbe Datei auswählen, es sei denn, Sie speichern jede Datei und vergleichen sie programmgesteuert.

Die Art und Weise, wie Sie mit Dateien interagieren (was JS macht, wenn der Benutzer eine Datei hochlädt) ist HTML5 File API und JS FileReader .

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

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

Diese Lernprogramme zeigen Ihnen, wie Sie die Metadaten (als js-Objekt gespeichert) erfassen und lesen, wenn eine Datei hochgeladen wird.

Erstellen Sie eine Funktion, die 'onChange' auslöst, um Metadaten der aktuellen Datei mit den vorherigen Dateien zu lesen. Dann können Sie Ihr Ereignis auslösen, wenn die gewünschte Datei ausgewählt ist.

0

Glauben Sie mir, es wird Ihnen definitiv helfen!

// 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;
};

Ich hoffe, das hilft vielen von euch.

0
ArifMustafa