JavaScript ile bir HTML dosyası girişini nasıl temizleyebilirim?

Formumdaki dosya girişini temizlemek istiyorum.

Kaynakları aynı yönteme ayarlamayı biliyorum ... Ancak bu yöntem seçilen dosya yolunu silmez.

Not : Sayfayı yeniden yüklemek, formu sıfırlamak veya AJAX çağrısı yapmak zorunda kalmamak istiyorum.

Mümkün mü?

Bu düğümü kaldırıp aynı ada sahip yeni bir tane oluşturmaya ne dersiniz?

Dosya girişini javascript ile temizlemenin 3 yolu vardır:

1. değer özelliğini boş veya null olarak ayarlayın.

   IE11 + ve diğer modern tarayıcılar için çalışır.

2. Yeni bir dosya giriş öğesi oluşturun ve eskisini değiştirin.

   Dezavantajı, olay dinleyicilerini ve expando özelliklerini kaybedecek olmanızdır.

3. Sahip formunu form.reset () yöntemi ile sıfırlayın.

   Aynı sahip formundaki diğer giriş öğelerini etkilemekten kaçınmak için, yeni bir boş form oluşturabilir ve dosya giriş öğesini bu yeni forma ekleyebilir ve sıfırlayabiliriz. Bu yol tüm tarayıcılarda işe yarar.

Bir javascript işlevi yazdım. demo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){ }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'),
                parentNode = f.parentNode, ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            parentNode.insertBefore(f,ref);
        }
    }
}

tl; dr : Modern tarayıcılar için sadece

input.value = '';

Eski cevap:

Peki ya:

input.type = "text";
input.type = "file";

Hala bu mu anlamak zorunda değil çalışmak webkit .

Her neyse, bu IE9>, Firefox ve Opera ile çalışır.
Webkit ile ilgili durum, onu dosyaya geri döndürememem gibi görünüyor.
IE8 ile durum, bir güvenlik istisnası atmasıdır.

Düzenleme: Webkit, Opera ve firefox için bu çalışır, ancak:

input.value = '';

(bu öneriyle yukarıdaki yanıtı kontrol edin)

GC'ye ihtiyaç duymadan bu çapraz tarayıcıyı yapmanın daha temiz bir yolunu bulup bulamayacağımı göreceğim.

Düzenleme2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

Çoğu tarayıcıyla çalışır. IE <9 ile çalışmıyor, hepsi bu.
Firefox 20, chrome 24, opera 12, IE7, IE8, IE9 ve IE10'da test edilmiştir.

Değeri olarak ayarlamak ''tüm tarayıcılarda çalışmaz.

Bunun yerine, değeri şu şekilde ayarlamayı deneyin null:

document.getElementById('your_input_id').value= null;

DÜZENLEME: JS'nin dosya girişini ayarlamasına izin vermemek için çok geçerli güvenlik nedenlerini anlıyorum, ancak zaten seçili olan çıktıyı temizlemek için basit bir mekanizma sağlamak mantıklı görünüyor . Boş bir dize kullanmayı denedim ancak tüm tarayıcılarda NULLçalışmadı, denediğim tüm tarayıcılarda (Opera, Chrome, FF, IE11 + ve Safari) çalıştı.

DÜZENLEME: NULLBoş bir dizeye ayarlanırken tüm tarayıcılarda çalışacak ayarın işe yaramadığını lütfen unutmayın .

Maalesef yukarıdaki cevapların hiçbiri tüm temelleri kapsamıyor - en azından vanilya javascript ile yaptığım testte değil.

• .value = nullFireFox, Chome, Opera ve IE11 üzerinde çalışıyor gibi görünüyor (ancak IE8 / 9/10 değil )

• .cloneNode(ve .clone()jQuery'de) FireFox'ta üstünü kopyalıyor .value, bu nedenle klonu anlamsız hale getiriyor.

İşte FireFox (27 ve 28), Chrome (33), IE (8, 9, 10, 11), Opera (17) üzerinde çalışan yazdığım vanilya javascript işlevi ... bunlar şu anda mevcut olan tek tarayıcılar bana test etmek için.

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

ctrlFonksiyon olarak çağrılacak diye parametresi, dosya giriş kendisidir ...

clearFileInput(document.getElementById("myFileInput"));

ÇÖZÜM

Aşağıdaki kod jQuery ile benim için çalıştı. Her tarayıcıda çalışır ve olayları ve özel özellikleri korumaya izin verir.

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

Kod ve gösteri için bu jsFiddle'a bakın .

LİNKLER

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

• Dosya girişi JavaScript ile nasıl sıfırlanır

Yeni dosya girişiyle değiştirmeniz gerekiyor. JQuery ile şu şekilde yapılabilir:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

ve giriş alanını temizlemeniz gerektiğinde bu satırı kullanın (örneğin bazı olaylarda):

inputFile.parent().html( inputFile.parent().html() );

document.getElementById('your_input_id').value=''

Düzenleme:
Bu, IE ve operada çalışmıyor, ancak firefox, safari ve chrome için çalışıyor gibi görünüyor.

Ben de aynı sorunu yaşıyordum ve bunu buldum.

var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';

document.querySelector('button').onclick = function(){
  file.files = emptyFile.files;
}

<input type='file'>
<button>clear</button>

Bu aslında oldukça kolay.

document.querySelector('#input-field').value = '';

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

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

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

tüm övgü Chris Coyier'e gidiyor .

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

bu input.value = nullçalışan bir yöntemdir, ancak yalnızca changebir onclickolaydan çağrılırsa girdinin olayını tetikler .

Bunun çözümü onchange, girişi sıfırlamanız gerektiğinde bu işleyiciyi manuel olarak aramak olacaktır .

function reset_input(input) {
    $(input)[0].value = null;
    input_change_handler();
}
function input_change_handler() {
    // this happens when there's been a change in file selection

    if ($(input)[0].files.length) {
        // file(s) selected
    } else {
        // nothing is selected
    }
}
$(input).on('change', input_change_handler);

Yukarıdaki cevaplar, aşağıdaki nedenlerden dolayı biraz beceriksiz çözümler sunar:

1. Yapmamaya olması gibi yapmak ilk ve ardından html alma, bu çok ilgili ve kirli.wrapinput

2. Çapraz tarayıcı JS'si kullanışlıdır ve bu durumda, typeanahtarlamayı (yine biraz kirli olan) ve ayarlamayı güvenilir bir şekilde kullanmak için çok fazla bilinmeyen var gibi görünüyor value.''

Bu yüzden size jQuery tabanlı çözümümü sunuyorum:

$('#myinput').replaceWith($('#myinput').clone())

Söylediğini yapar, girişi kendi klonuyla değiştirir. Klonda dosya seçilmeyecektir.

Avantajlar:

1. Basit ve anlaşılır kod
2. Beceriksiz sarma veya tür değiştirme yok
3. Çapraz tarayıcı uyumluluğu (burada yanılıyorsam düzeltin)

Sonuç: Mutlu programcı

İşte benim iki sentim, girdi dosyaları dizi olarak saklanıyor, bu yüzden onu nasıl sıfırlayacağınız burada

document.getElementById('selector').value = []

bu boş bir dizi döndürür ve tüm tarayıcılarda çalışır

Bana yardımcı olan, kuyruğu temizlemek yerine son seçilen dosyayı bir döngü kullanarak alıp yüklemeye çalıştım ve işe yaradı. İşte kod.

for (int i = 0; i <= Request.Files.Count-1; i++)
{
 HttpPostedFileBase uploadfile = files[i];
 Stream fs = uploadfile.InputStream;
 BinaryReader br = new BinaryReader(fs);
 Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}

Umarım bu biraz yardımcı olabilir.

Çözümlerin çoğunu denedim ama işe yarayacak gibi görünmedim. Ancak aşağıda bunun için bir yürüyüş buldum.

Formunun yapısı şöyledir: form=> label, inputve submit button. Bir dosya seçtikten sonra, JavaScript'te manuel olarak yaparak dosya adı etiket tarafından gösterilecektir.

Dolayısıyla benim stratejim şudur: başlangıçta gönderme buttondevre dışı bırakılır, bir dosya seçildikten sonra, gönder düğmesi disabledözelliği , dosyayı gönderebilmem için kaldırılır. Gönderdikten sonra label, dosyayı temizliyormuşum gibi görüneninput ancak aslında . Ardından, formu göndermemek için gönder düğmesini tekrar devre dışı bırakacağım.

Gönderme ayarını yapıp button disableyapmamayı seçerek, başka bir dosya seçmediğim sürece dosyanın gönderilmesini birçok kez durduruyorum.

SetAttribute kullanarak metin yazmak ve dosyaya yazmak için değiştirdim

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}

Bu benim için çalıştı. const clear = (event) => {event.target.value = [];} clear ("input_id");