html5에서 업로드하는 파일을 프로그래밍 방식으로 하나 이상 제거 하시겠습니까?

Question

아래 내용이 있습니다. dostuff에서 내 파일 업로드에서 하나 이상의 파일 (전부는 아니지만)을 제거하고 싶습니다.

유일한 이미지는 png, jpg 및 gif입니다. Bmp, svg 등은 거부 된 양식을 가져옵니다.

나는 자바 스크립트를 검사하지만 받아 들일 수없는 파일 (bmp 등)을 제거하고 계속할 수 있는지 묻는 메시지를 표시하고 싶습니다. 프로그래밍 방식으로 파일을 업로드에서 제거하려면 어떻게해야합니까?

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를 사용하고 있습니다. 그렇게하고 싶다면 바닐라 js로 변환 할 수 있습니다. 코드 스 니펫은 다음과 같습니다.

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

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

희망이 있습니다.