JQuery kullanarak <input type = 'file' /> öğesini temizleme

<input type='file' />JQuery ile bir kontrol değerini silmek mümkün müdür ? Aşağıdakileri denedim:

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

Ama işe yaramıyor.

Kolay: <form>öğenin etrafına sarılır , form üzerinde reset çağrısı yapar ve ardından formu kullanarak kaldırılır .unwrap(). .clone()Bu iş parçacığındaki diğer çözümlerden farklı olarak, sonunda aynı öğeyle sonuçlanırsınız (üzerinde ayarlanmış özel özellikler dahil).

Opera, Firefox, Safari, Chrome ve IE6 + 'da test edildi ve çalışıyor. Ayrıca, diğer form öğeleri üzerinde de çalışır type="hidden".

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

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

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

Timo'nın aşağıda belirttiği gibi, içindeki alanın sıfırlanmasını tetikleyen düğmeleriniz varsa, bir gönderimi tetiklemesini önlemek için olayı <form>çağırmalısınız ..preventDefault()<button>

DÜZENLE

Düzeltilmemiş bir hata nedeniyle IE 11'de çalışmaz. Girişteki metin (dosya adı) silinir, ancak Filelistesi doldurulur.

Hızlı cevap: değiştirin.

Aşağıdaki kodda replaceWith, denetimi kendi başına bir klonla değiştirmek için jQuery yöntemini kullanıyorum . Bu denetimdeki olaylara bağlı işleyicileriniz varsa, bunları da korumak isteyeceğiz. Bunu yapmak trueiçin cloneyöntemin ilk parametresi olarak geçeriz.

<input type="file" id="control"/>
<button id="clear">Clear</button>

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

Keman: http://jsfiddle.net/jonathansampson/dAQVM/

Klonlama, olay işleyicilerini korurken, bir üst öğeden bu denetime yapılan tıklamaları işlemek için olay yetkisi kullanmayı düşünebileceğiniz sorunları sunar:

$("form").on("focus", "#control", doStuff);

Bu, kontrol yenilenirken herhangi bir işleyicinin elemanla birlikte klonlanması gereğini önler.

Jquery'nin sizin için çapraz tarayıcı / eski tarayıcı sorunlarıyla ilgilenmesi gerekiyor.

Bu, test ettiğim modern tarayıcılarda çalışır: Chromium v25, Firefox v20, Opera v12.14

Jquery 1.9.1 kullanma

HTML

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

jQuery

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

Açık jsfiddle

Aşağıdaki javascript çözümü de yukarıda belirtilen tarayıcılarda benim için çalıştı.

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

Açık jsfiddle

IE ile test etmenin bir yolu yok, ancak teorik olarak bu işe yarayacak. IE farklı bir şekilde yapmış olduğu için IE Javascript sürümünün işe yaramayacağı kadar farklıysa, jquery yöntemi bence sizin için onunla ilgilenmelidir, aksi takdirde jquery ekibine birlikte işaret etmeye değer olacaktır. IE gerektiren bir yöntem. ("Bu IE üzerinde işe yaramaz" diyen insanlar görüyorum, ama IE üzerinde nasıl çalıştığını göstermek için vanilya javascript (sözde "güvenlik özelliği"?), Belki de MS için bir hata olarak rapor (eğer onlar bu şekilde sayın), böylece daha yeni bir sürümde sabitlenir)

Başka bir cevapta belirtildiği gibi, jquery forumunda bir yazı

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

Ancak jquery, tarayıcı testi jquery.browser desteğini kaldırmıştır.

Bu javascript çözümü de benim için çalıştı, jquery.replaceWith yönteminin vanilya eşdeğeri .

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Açık jsfiddle

Dikkat edilmesi gereken önemli bir nokta, cloneNode yönteminin ilişkili olay işleyicilerini korumamasıdır.

Bu örneğe bakın.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

Açık jsfiddle

Ama jquery.clone bunu sunuyor ^{[* 1]}

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Açık jsfiddle

^{[* 1]} jquery, jquery.data'da bir kopyasını sakladığı için olaylar jquery'nin yöntemleriyle eklendiyse bunu yapabilir , aksi halde çalışmaz, bu yüzden biraz hile / geçici çözümdür ve bazı şeylerin olmadığı anlamına gelir farklı yöntemler veya kütüphaneler arasında uyumludur.

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

Açık jsfiddle

Ekli olay işleyicisini doğrudan öğenin kendisinden alamazsınız.

İşte vanilya javascript genel prensibi, bu tüm diğer kütüphaneler jquery (kabaca) böyle yapar.

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

Açık jsfiddle

Elbette jquery ve diğer kütüphaneler, böyle bir listeyi korumak için gerekli olan tüm diğer destek yöntemlerine sahiptir, bu sadece bir gösterimdir.

Açık güvenlik nedenlerinden dolayı, boş bir dizeye bile bir dosya girişinin değerini ayarlayamazsınız.

Tek yapmanız gereken, alanın bulunduğu formu sıfırlamak veya yalnızca diğer alanları içeren bir formun dosya girişini sıfırlamak istiyorsanız, bunu kullanın:

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

İşte bir örnek: http://jsfiddle.net/v2SZJ/1/

Bu benim için çalışıyor.

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

Umarım yardımcı olur.

IE8'de Dosya Yükleme alanını güvenlik için salt okunur yaptılar. Bkz IE takımı blog yazısı :

Geçmişte, HTML Dosya Yükleme Denetimi (), önemli sayıda bilgi ifşa güvenlik açığının kaynağı olmuştur. Bu sorunları gidermek için denetimin davranışında iki değişiklik yapılmıştır.

Kullanıcıyı denetime yerel bir dosya yolu yazması için gizlice kandırmak üzere "çalma" tuş vuruşlarına dayanan saldırıları engellemek için Dosya Yolu düzenleme kutusu artık salt okunurdur. Kullanıcı, Dosyaya Gözat iletişim kutusunu kullanarak yükleme için açıkça bir dosya seçmelidir.

Ayrıca, "Dosyaları yüklerken yerel dizin yolunu ekle" URLAction, İnternet Bölgesi için "Devre Dışı Bırak" olarak ayarlandı. Bu değişiklik, potansiyel olarak hassas yerel dosya sistemi bilgilerinin İnternet'e sızmasını önler. Örneğin, Internet Explorer 8 tam yolunu C: \ users \ ericlaw \ document \ secret \ image.png göndermek yerine artık yalnızca image.png dosya adını gönderecektir.

$("#control").val('')tüm ihtiyacın olan! JQuery 1.11 kullanılarak Chrome'da test edildi

Diğer kullanıcılar Firefox'ta da test etti.

Buradaki tüm seçeneklere takıldım. İşte işe yarayan bir kesmek:

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

ve buna benzer bir kodla jQuery kullanarak sıfırlamayı tetikleyebilirsiniz:

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

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

Ben bununla sona erdi:

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'); 
}

en şık çözüm olmayabilir, ama anlayabildiğim kadarıyla işe yarıyor.

Ben crossbrowser, iyi test edilmiş, kullanımı kolay ve aynı zamanda IE sorunu ve gizli alanları temizleme olarak adlandırılan bir işlevi vardır https://github.com/malsup/form/blob/master/jquery.form.js , clearInputs()kullandım gerekirse. Belki sadece dosya girişini temizlemek için biraz uzun bir çözüm, ancak crossbrowser dosya yüklemeleri ile uğraşıyorsanız, bu çözüm önerilir.

Kullanımı kolaydır:

// Tüm dosya alanlarını temizle:
( ": Dosya girişi") clearInputs (); $.

// Gizli alanları da temizle:
( ": Dosya girişi") clearInputs (doğru);, $.

// Belirli alanları temizle:
$ ( "# Myfilefield1, # ​​myfilefield2") clearInputs ().;

/ **
 * Seçili form öğelerini temizler.
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (includeHidden) {
    var re = / ^ (?: renk | tarih | datetime | e-posta | ay | sayı | şifre | aralık | arama | tel | metin | saat | url | hafta) $ / i; // 'gizli' bu listede yok
    return this.each (function () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || tag == 'textarea') {
            this.value = '';
        }
        else if (t == 'onay kutusu' || t == 'radyo') {
            this.checked = yanlış;
        }
        else if (tag == 'seçin') {
            this.selectedIndex = -1;
        }
        else if (t == "dosya") {
            eğer (/MSIE/.test(navigator.userAgent)) {
                $ (This) .replaceWith () (true $ (this) .clone);
            } Başka {
                $ (This) .val ( '');
            }
        }
        else if (includeHidden) {
            // includeHidden, true değeri olabilir veya bir seçici dize olabilir
            // özel bir testi belirtir; Örneğin:
            // $ ('# myForm'). clearForm ('. special: hidden')
            // yukarıdakiler 'özel' sınıfına sahip gizli girdileri temizler
            if ((includeHidden === true && /hidden/.test(t)) ||
                 (typeof includeHidden == 'dize' && $ (this) .is (includeHidden)))
                this.value = '';
        }
    });
};

Dosya girişlerinin değeri salt okunurdur (güvenlik nedeniyle). Programlı olarak boş bırakamazsınız (yalnızca bu alandan daha geniş bir kapsama sahip olan formun reset () yöntemini çağırmak dışında).

Aşağıdaki kodla benimkini çalıştırabildim:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

HTML dosya girişini temizlemenin basit ve temiz bir yolunu arıyordum, yukarıdaki cevaplar harika, ancak web'de basit ve zarif bir yolla karşılaşana kadar hiçbiri gerçekten aradığım şeyi cevaplamıyor:

var $input = $("#control");

$input.replaceWith($input.val('').clone(true));

tüm kredi gitmek Chris Coyier 's .

// Referneces
var control = $("#control"),
    clearBn = $("#clear");

// Setup the clear functionality
clearBn.on("click", function(){
    control.replaceWith( control.val('').clone( true ) );
});

// Some bound handlers to preserve when cloning
control.on({
    change: function(){ console.log( "Changed" ) },
     focus: function(){ console.log(  "Focus"  ) }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>

.clone()Şey yok değil Opera'da (ve muhtemelen diğerleri) çalışır. İçeriği tutar.

Benim için en yakın yöntem Jonathan'ın daha önceleriydi, ancak alanın benim durumumda dağınık kod için yapılmış adını, sınıflarını vb.

Böyle bir şey işe yarayabilir (Quentin sayesinde):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

Ben aşağıdakileri kullanarak işe almak başardık ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

Bu IE10, FF, Chrome ve Opera'da test edilmiştir.

İki uyarı var ...

1. FF'de yine de düzgün çalışmıyor, sayfayı yenilerseniz, dosya öğesi seçilen dosyayla yeniden doldurulur. Bu bilgiyi nereden aldığı benim dışımda. Bir dosya giriş öğesiyle ilgili başka ne temizlemeyi deneyebilirim?

2. Dosya giriş öğesine eklediğiniz tüm olaylarda temsilci seçmeyi unutmayın, böylece klon yapıldığında yine de çalışırlar.

Anlamadığım şey, kimin geçersiz bir kabul edilemez dosya seçiminden bir giriş alanını temizlemenize izin vermediğini düşünmesi iyi bir fikir miydi?

Tamam, dinamik olarak bir değerle ayarlamama izin vermeyin, böylece bir kullanıcının işletim sisteminden dosyalara erişemiyorum, ancak formun tamamını sıfırlamadan geçersiz bir seçimi temizleyeyim.

'Kabul et' bir şekilde bir filtre dışında bir şey yapmıyor gibi ve IE10'da, MS Word mime türlerini bile anlamıyor, bir şaka!

Firefox 40.0.3'te sadece bununla çalış

 $('input[type=file]').val('');
 $('input[type=file]').replaceWith($('input[type=file]').clone(true));

her tarayıcıda benim için çalışıyor.

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

Kullanıcıların bahsettiği tekniklerin çoğunu denedim, ancak hiçbiri tüm tarayıcılarda çalışmadı. ie: clone (), dosya girişleri için FF'de çalışmaz. Dosya girdisini manuel olarak kopyaladım ve sonra orijinali kopyalananla değiştirdim. Tüm tarayıcılarda çalışır.

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

Bu, Chrome, FF ve Safari ile çalışır

$("#control").val("")

IE veya Opera ile çalışmayabilir

Eşzamansız hale getirin ve düğmenin istediğiniz eylemleri yapıldıktan sonra sıfırlayın.

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}

benim için çalışmıyor:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

bu yüzden asp mvc dosya girişi değiştirmek için jilet özelliklerini kullanın. ilk önce Id ve Name ile giriş dizesi için bir değişken oluşturun ve ardından bunu sayfada göstermek ve reset butonu tıklamasıyla değiştirmek için kullanın:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

Kolay bir yol giriş tipini değiştirmek ve tekrar değiştirmek.

Bunun gibi bir şey:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

Klonuyla değiştirebilirsiniz.

var clone = $('#control').clone();

$('#control').replacewith(clone);

Ama bu değeri ile de klonlar, böylece daha iyi olsaydınız

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

Kolay lol ([opera hariç] tüm tarayıcılarda çalışır):

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

JS Fiddle: http://jsfiddle.net/cw84x/1/

Ne? Doğrulama işlevinizde,

document.onlyform.upload.value="";

Yüklemenin adı olduğunu varsayarsak:

<input type="file" name="upload" id="csv_doc"/>

JSP kullanıyorum, bunun bir fark yaratıp yaratmadığından emin değilim ...

Benim için çalışıyor ve bence çok daha kolay.