입력 파일 컨트롤에서 특정 파일 하나를 제거하는 방법

Question

입력 파일 컨트롤에서 특정 파일 하나를 제거하는 방법은 무엇입니까?

여러 파일을 선택할 수있는 입력 파일 컨트롤이 있습니다. 그러나, 나는 파일을 유효화하고 싶다. 그리고 만약 파일 확장자가 잘못 되었다면 그 파일을 파일 자체에서 제거해야한다.

나는 아래 개체의 스크린 샷하지만 난 다른 사람들이 지적이

Answer 1

, FileList이 읽기 ​​전용 수정할 수 없습니다입니다

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


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

아래로했습니다. 이 파일들을 별도의 Array에 넣음으로써이 문제를 해결할 수 있습니다. 그런 다음 큐 레이션 된 파일 목록으로 원하는 모든 작업을 수행 할 수 있습니다. 서버에 파일을 업로드하는 것이 목표 인 경우 API를 사용할 수 있습니다.

다음은 FileList을 수정할 필요가 완전히 없도록하는 방법에 대한 내용입니다. 단계 :

1. 별도의 배열에 원하는 확인을 위해 변경 이벤트, 필터의 각 파일을 통해 로컬 파일을 읽을 수있는
2. 사용 FileReader API를
3. 밀어 유효한 파일을 일반 파일 입력 변경 이벤트 리스너
4. 루프를 추가
5. 서버

이벤트 HANDL에 유효 처리 된 파일 제출 어 및 기본 파일 루프 코드 : 아래

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 */ 
    } 
    }); 
}); 

는 브라우저로 파일을로드하고 선택적으로 Base64로 같은 서버에 제출 FileReader API를 사용하는 방법을 보여줍니다 파일 루프의 더 복잡한 버전입니다 인코딩 된 얼룩.

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 사용시주의 사항. 파일을 Base64로 인코딩하면 크기가 약 30 % 증가합니다. 그것이 받아 들일 수없는 경우에 당신은 다른 것을 시도 할 필요가있을 것이다.

Answer 2

HTML

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

자바 스크립트

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); 
    } 

Answer 3

내가 여기뿐만 아니라 여기 내 댓글을 추가해야한다는 생각은 (내가 여기에 대답했습니다 JavaScript delete File from FileList to be uploaded)

나는 해결 방법을 발견했다. 이것은 AJAX를 요구하지 않고 양식을 서버에 보낼 수 있습니다. 기본적으로 hidden 또는 text 입력을 생성하고 선택한 파일을 처리 한 후에 생성 된 base64 문자열에 value 속성을 설정할 수 있습니다.

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

당신은 아마 대신 입력 text 또는 hidden의 여러 입력 파일을 만들 아이디어를 고려할 것입니다. 우리가 가치를 부여 할 수 없기 때문에 이것은 효과가 없을 것입니다.

데이터베이스와 입력 당신이 할 수 파일 무시하는 전송되는 데이터의 입력 파일이 포함됩니다이 방법 : 현장을 고려하지 않는 백 엔드에서

• 을;
• 양식을 serialize하기 전에 disabled 특성을 입력 파일에 설정할 수 있습니다.
• 데이터 보내기 전에 DOM 요소를 제거하십시오.

파일을 삭제하려면 요소의 색인을 가져온 다음 DOM에서 입력 요소 (텍스트 또는 숨김)를 제거하면됩니다.

요구 사항 :

• 당신은 입력 파일이 change 이벤트를 트리거 할 때마다 배열 안에있는 모든 파일을 base64로 파일을 변환 및 저장하는 로직을 작성해야합니다.

장점 :

• 이것은 기본적으로 많은 당신에게 컨트롤의을 을 줄 것이다 당신은 .. 등등
을, 파일을 비교, 필터링 파일 크기, MIME 종류를 확인 할 수 있습니다