2013-09-27 17 views
31

Belirli bir seçili dosyayı giriş dosyası denetiminden nasıl kaldırılır?Girdi dosyası denetiminden belirli bir seçili dosya nasıl kaldırılır

Birden çok dosya seçme seçeneğiyle bir girdi dosyası kontrolüm var; ancak bir dosyayı doğrulamak istiyorum ve eğer yanlış bir uzantı varsa o dosyayı dosya kontrolünden kaldırmalıyım, bu mümkün mü?

Ben Aşağıda nesnenin ekran görüntüsü ama diğer insanlar belirttiği gibi bu

enter image description here

+0

Dosyalar ile ne yapacaksınız? kullanıcı bunları yükledikten sonra tmp klasörünüze kopyalanırlar ve bilgileri sahip olduğunuz dizide tutulur, böylece işlemeye gittiğinizde, sadece yanlış uzantılara sahip olanlar ... –

+3

Çocuklar, bir dizi değil, "0", "1", "2" özniteliğine sahip bir nesne bu yüzden burada –

+1

dizi işlemlerini gerçekleştiremiyorum Ne yazık ki, dosyaları yalnızca okunan gibi bir FileList içinde değiştiremezsiniz. Yeni bir FileList oluşturmak da imkansız. Sorununuz, giriş öğesinin 'kabuller' özelliği kullanılarak çözülebilir mi? FileList'ten TÜM dosyaları şu şekilde kaldırabilirsiniz: '$ (" # fileToUpload ") [0] .value = ''' –

cevap

31

, FileList salt okunur değiştirmek mümkün değilim

<input type="file" name="fileToUpload" id="fileToUpload" multiple/> 


<script> $("#fileToUpload")[0].files[0] </script> 

aşağıdaki gibi çalıştı. Ancak, bu dosyaları ayrı bir Array'a iterek bunu yapabilirsiniz. Daha sonra, bu seçilmiş dosya listesinden istediğinizi yapabilirsiniz. Bunları bir sunucuya yüklüyorsanız, FileReader API'sini kullanabilirsiniz.

FileList'u değiştirmeye ihtiyaç duymaktan tamamen kaçınmanın bir yoludur. Adımlar:

  1. ayrı diziye istenen doğrulama için değiştirme olayı, filtreden her dosya aracılığıyla yerel dosyaları okumak için
  2. Kullanım FileReader API
  3. itin geçerli dosyaları, normal dosya giriş değiştirme olayı dinleyicisi
  4. Döngü ekle
  5. sunucuya

Olay handl için geçerli, işlenmiş dosyası gönder er ve temel dosya döngü kodu: Aşağıda

var validatedFiles = []; 
$("#fileToUpload").on("change", function (event) { 
    var files = event.originalEvent.target.files; 
    files.forEach(function (file) { 
    if (file.name.matches(/something.txt/)) { 
     validatedFiles.push(file); // Simplest case 
    } else { 
     /* do something else */ 
    } 
    }); 
}); 

tarayıcıda içine dosyasını yüklemek ve isteğe bağlı olarak bir Base64 olarak bir sunucuya göndermek için FileReader API kullanabilirsiniz gösterir bu dosya döngü daha karmaşık bir versiyonudur kodlanmış blob.

files.forEach(function (file) { 
    if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side 
     var reader = new FileReader(); 
     // Setup listener 
     reader.onload = (function (processedFile) { 
     return function (e) { 
      var fileData = { name : processedFile.name, fileData : e.target.result }; 

      // Submit individual file to server 
      $.post("/your/url/here", fileData); 

      // or add to list to submit as group later 
      validatedFiles.push(fileData); 
     }; 
     })(file); 

     // Process file 
     reader.readAsDataURL(file); 
    } else { 
     /* still do something else */ 
    } 
    }); 

FileReader API kullanarak yaklaşık Uyarı notu. Bir dosya kodlayan Base64, boyutunu yaklaşık% 30 oranında artıracaktır. Bu kabul edilebilir değilse başka bir şey denemeniz gerekecektir.

+2

Merhaba, tek bir şey. dosyaları bir javascript nesnesidir, bu yüzden .forEach'i kullanamazsınız, bunun yerine [] .forEach.call (dosyalar, işlev (dosya) {....}) – Fibonacci

+0

Teşekkürler. Evet, bu iyi bir nokta. –

+0

Bu çözüm, yalnızca dosyaları tek tek dosyaları sunucuya göndermek yerine Form Submit – Jorge

-9

html

<input id="fileInput" name="fileInput" type="file" /> 
<input onclick="clearFileInput()" type="button" value="Clear" /> 

javascript

function clearFileInput(){ 
     var oldInput = document.getElementById("fileInput"); 

     var newInput = document.createElement("input"); 

     newInput.type = "file"; 
     newInput.id = oldInput.id; 
     newInput.name = oldInput.name; 
     newInput.className = oldInput.className; 
     newInput.style.cssText = oldInput.style.cssText; 
     // copy any other relevant attributes 

     oldInput.parentNode.replaceChild(newInput, oldInput); 
    } 
+0

Kötü bir fikir değil ... "OldInput" işlevini "newInput" ile değiştirin, gerçek form gönderme için kullanılan gerçek bir "hiddenInput" ile değiştirin ve "oldInput" değerini olduğu gibi bırakın. – skplunkerin

2

ben de burada benim yorum eklemek gerektiğini düşündüm (burada Yanıtım: JavaScript delete File from FileList to be uploaded)

Ben geçici bir çözüm buldu. Bu istek için AJAX gerektirmeyecek ve form sunucuya gönderilebilir. Temel olarak, hidden veya text girişi oluşturabilir ve seçili dosyayı işledikten sonra oluşturulan base64 dizesine value özniteliğini ayarlayabilirsiniz.

<input type=hidden value=${base64string} /> 

Muhtemelen yerine girdi text veya hidden çoklu giriş dosyası oluşturmak için fikir dikkate alacaktır. Buna bir değer atayamayacağımız için bu işe yaramaz.

veritabanına ve giriş yapabildin dosyayı görmezden gönderilen verilerdeki giriş dosyasını içerecektir Bu yöntem: alanına düşünmüyoruz arka planında yer

  • ;
  • formunu serileştirmeden önce giriş dosyasına disabled özniteliğini ayarlayabilirsiniz;
  • Veri göndermeden önce DOM öğesini kaldırın.

Bir dosyayı silmek istediğinizde, yalnızca öğenin dizinini alın ve DOM'dan giriş öğesini (metin veya gizli) kaldırın.

Gereksinimler:

  • Sen girdi dosyası change olayı tetiklemek zaman bir dizi içindeki tüm dosyaları base64 dosyaları dönüştürmek ve saklamak için mantık yazmak gerekir.

Artıları:

  • Bu temelde bir sürü size kontroldenverecek ve sen .. vb
  • , dosyaları karşılaştırarak, filtre dosya boyutu, MIME türü için kontrol edebilir ve