एचटीएमएल 5 में अपलोड से 1 या अधिक फाइलों को प्रोग्रामेटिक रूप से हटा दें?

Question

मेरे पास नीचे है। dostuff में मैं अपनी फ़ाइल अपलोड से 1 या अधिक फ़ाइलें (लेकिन सभी नहीं) को हटाना चाहता हूं।

मेरे द्वारा स्वीकार की जाने वाली एकमात्र छवियां png, jpg और gif हैं। Bmp, svg और आदि फॉर्म को अस्वीकार कर दिया जाएगा।

मैं जावास्क्रिप्ट में एक चेक करता हूं लेकिन मैं यह पूछना चाहता हूं कि क्या मैं अस्वीकार्य फ़ाइलों को हटा सकता हूं (bmp, आदि) और जारी रखें। प्रोग्राम को प्रोग्रामेटिक रूप से अपलोड करने से मैं कैसे हटा सकता हूं?

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

Answer 1

आप एक सरणी के रूप में फाइल का उपयोग कर सकते, के रूप में अस्वीकृत फ़ाइलें निकालने के लिए की जरूरत है तो बस सरणी में हेरफेर।

<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

मैंने हाल ही में इस मुद्दे में भी भाग लिया है। मैं अपनी समस्या को हल करने के लिए jQuery का उपयोग कर रहा हूं, जिसका अर्थ यह है कि यदि आप ऐसा करना चाहते हैं तो इसे वेनिला जेएस में अनुवादित किया जा सकता है। यहां एक कोड स्निपेट है:

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

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

आशा है कि इससे मदद मिलती है!