Löschung von <input type='file' /> mit jQuery

Question

Ist es möglich, eine <input type='file' /> Kontrollwert mit jQuery? Ich habe das Folgende versucht:

$('#control').attr({ value: '' }); 

Aber es funktioniert nicht.

Answer 1

Im IE8 wurde das Feld für den Datei-Upload aus Sicherheitsgründen schreibgeschützt. Siehe die Blogbeitrag des IE-Teams :

In der Vergangenheit war das HTML File Upload Control () die Quelle für eine beträchtliche Anzahl von Sicherheitslücken bei der Offenlegung von Informationen. Um diese Probleme zu beheben, wurden zwei Änderungen am Verhalten des Steuerelements vorgenommen.

Um Angriffe abzuwehren, die auf das "Stehlen" von Tastenanschlägen beruhen, um den Benutzer heimlich dazu zu bringen, einen lokalen Dateipfad in das Steuerelement einzugeben, ist das Eingabefeld Dateipfad jetzt schreibgeschützt. Der Benutzer muss eine Datei für den Upload explizit über das Dialogfeld "Dateisuche" auswählen.

Außerdem wurde die URLAction "Include local directory path when uploading files" für die Internetzone auf "Disable" gesetzt. Diese Änderung verhindert, dass potenziell sensible Informationen des lokalen Dateisystems ins Internet gelangen. Anstatt den vollständigen Pfad zu übermitteln, wird zum Beispiel C:\users\ericlaw\documents\secret\image.png Der Internet Explorer 8 übermittelt jetzt nur noch den Dateinamen image.png.

Answer 2

$("#control").val('') ist alles, was Sie brauchen! Getestet auf Chrome mit JQuery 1.11

Andere Benutzer haben auch mit Firefox getestet.

Answer 3

Ich bin bei all den Optionen hier hängen geblieben. Hier ist ein Hack, den ich gemacht, die funktioniert:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

und Sie können das Zurücksetzen mit jQuery mit einem ähnlichen Code wie diesem auslösen:

$('#file_reset').trigger('click');

(jsfiddle: http://jsfiddle.net/eCbd6/ )

Answer 4

I

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

m

Answer 5

Ich habe verwendet https://github.com/malsup/form/blob/master/jquery.form.js die eine Funktion namens clearInputs() die browserübergreifend, gut getestet und einfach zu benutzen ist und auch IE-Probleme und das Löschen von versteckten Feldern behandelt, falls erforderlich. Vielleicht eine etwas langwierige Lösung, um nur die Dateieingabe zu löschen, aber wenn Sie mit Crossbrowser-Datei-Uploads zu tun haben, dann ist diese Lösung empfehlenswert.

Die Benutzung ist einfach:

// Clear all file fields:
$("input:file").clearInputs();

// Clear also hidden fields:
$("input:file").clearInputs(true);

// Clear specific fields:
$("#myfilefield1,#myfilefield2").clearInputs();
    /\*\*
 \* Clears the selected form elements.
 \*/
$.fn.clearFields = $.fn.clearInputs = function(includeHidden) {
    var re = /^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i; // 'hidden' is not in this list
    return this.each(function() {
        var t = this.type, tag = this.tagName.toLowerCase();
        if (re.test(t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'checkbox' || t == 'radio') {
            this.checked = false;
        }
        else if (tag == 'select') {
            this.selectedIndex = -1;
        }
        else if (t == "file") {
            if (/MSIE/.test(navigator.userAgent)) {
                $(this).replaceWith($(this).clone(true));
            } else {
                $(this).val('');
            }
        }
        else if (includeHidden) {
            // includeHidden can be the value true, or it can be a selector string
            // indicating a special test; for example:
            //  $('#myForm').clearForm('.special:hidden')
            // the above would clean hidden inputs that have the class of 'special'
            if ( (includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'string' && $(this).is(includeHidden)) )
                this.value = '';
        }
    });
};