Lập trình xóa 1 hoặc nhiều tệp khỏi tải lên trong html5?

Question

Tôi có thông tin bên dưới. Trong dostuff Tôi muốn xóa 1 hoặc nhiều tệp (nhưng không phải tất cả) khỏi các tệp tải lên của tôi.

Những hình ảnh duy nhất tôi chấp nhận là png, jpg và gif. Bmp, svg và v.v. sẽ bị từ chối biểu mẫu.

Tôi thực hiện kiểm tra bằng Javascript nhưng tôi muốn hỏi xem tôi có thể xóa các tệp không được chấp nhận (bmp, v.v.) và tiếp tục không. Làm thế nào tôi có thể loại bỏ các tập tin từ tải lên theo chương trình?

<input type='file' name='uploads[]' multiple="" 
     onchange="dostuff(this);" accept="image/*" /> 

Answer 1

Bạn có thể truy cập tệp dưới dạng mảng, sau đó chỉ thao tác mảng khi cần để xóa tệp không được chấp nhận.

<script type="text/javascript"> 
    function dostuff(input) { 
     var output = 'All Files:<br />'; 
     var validOutput = '<br />Valid Files:<br />'; 
     var validFiles = []; 
     for(var i = 0; i < input.files.length; i++) { 
      if(input.files[i].name.substr(-3, 3) != 'jpg') { 
       alert(input.files[i].name + ' is invalid'); 
      } 
      else { 
       validFiles.push(input.files[i]); 
       validOutput += input.files[i].name; 
      } 
      output += input.files[i].name + '<br />'; 
     } 
     output += validOutput; 
     document.getElementById('output').innerHTML = output; 
    } 
</script> 

<input type='file' name='uploads[]' multiple="" onchange="dostuff(this);" accept="image/*" /> 
<div id="output"></div> 

Fiddle here.

Answer 2

Gần đây tôi cũng đã gặp vấn đề này. Tôi đang sử dụng jQuery để giải quyết vấn đề của tôi, có nghĩa là nó có thể được dịch sang vani nếu bạn muốn làm điều đó. Dưới đây là đoạn mã:

function clearFileInput(){ 
    var fileInput = $('#your-file-input-selector'); 
    var fileInputContainer = fileInput.parent(); 
    var fileInputClone = fileInput.clone(); 

    fileInput.remove(); 
    fileInputContainer.append(fileInputClone); 
} 

Hy vọng điều này sẽ hữu ích!