[JQUERY] 어떻게 입력 파일 컨트롤에서 하나의 특정 선택한 파일을 제거합니다

어떻게 입력 파일 컨트롤에서 하나의 특정 선택한 파일을 제거합니다

해결법

1. ---

   1.다른 사람들이 지적한 바와 같이, 파일리스트는 읽기 전용입니다. 당신은 비록 별도의 배열로 해당 파일을 눌러이 주위를 얻을 수 있습니다. 그런 다음 파일의 큐 레이트 목록을 원하는대로 할 수 있습니다. 서버에 업로드하는 것이 목표 인 경우에는을 FileReader API를 사용할 수 있습니다.

   다른 사람들이 지적한 바와 같이, 파일리스트는 읽기 전용입니다. 당신은 비록 별도의 배열로 해당 파일을 눌러이 주위를 얻을 수 있습니다. 그런 다음 파일의 큐 레이트 목록을 원하는대로 할 수 있습니다. 서버에 업로드하는 것이 목표 인 경우에는을 FileReader API를 사용할 수 있습니다.

   아래는 완전히 파일 목록을 수정할 필요가 피하는 방법에 대한 원형이다. 단계 :

   이벤트 핸들러 및 기본 파일 루프 코드 :

   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 %의 크기를 증가시킬 것이다. 즉 허용되지 않는 경우에 당신은 다른 뭔가를 시도해야합니다.

2. ---

   2.나는 잘 여기에 나는 여기에 내 의견을 추가해야한다고 생각 (내가 여기에 대답했습니다 : 파일리스트에서 자바 스크립트를 삭제 파일 업로드 예정)

   나는 잘 여기에 나는 여기에 내 의견을 추가해야한다고 생각 (내가 여기에 대답했습니다 : 파일리스트에서 자바 스크립트를 삭제 파일 업로드 예정)

   나는 해결 방법을 발견했다. 이것은 모든의 요청에 AJAX를 필요로하지 않습니다 양식이 서버로 전송 될 수 있습니다. 기본적으로 당신은 숨기거나 텍스트 입력을 생성하고 선택한 파일을 처리 한 후 생성 된 base64로 문자열과 그것의 값 속성을 설정할 수 있습니다.

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

   당신은 아마 여러 입력 파일 대신 입력 텍스트 또는 숨겨진를 만들 아이디어를 고려할 것입니다. 우리가에 값을 할당 할 수 없습니다 이것은 작동하지 않습니다.

   이 방법은 데이터베이스에 당신이 할 수 입력 파일을 무시하는 전송되는 데이터의 입력 파일을 포함합니다 :

   당신이 파일을 삭제할 때 바로 요소의 인덱스를 얻고 DOM에서 입력 요소 (텍스트 또는 숨김)을 제거합니다.

   요구 사항 :

   장점 :

3. ---

   3.나는 이것이 이전 게시물 알고하지만 난 내 솔루션을 게시합니다 있도록이 일을 해결할하려고 연령을 보냈습니다. 또 다른의 fileList과 FileField와 요소의 파일 목록 업데이트하는 방법이있다 -의 dataTransfer 수행 할 수 있습니다 :

   나는 이것이 이전 게시물 알고하지만 난 내 솔루션을 게시합니다 있도록이 일을 해결할하려고 연령을 보냈습니다. 또 다른의 fileList과 FileField와 요소의 파일 목록 업데이트하는 방법이있다 -의 dataTransfer 수행 할 수 있습니다 :

   let updateFileList = function (fileField, index) {
     let fileBuffer = Array.from(fileField.files);
     fileBuffer.splice(index, 1);
   
     /** Code from: https://stackoverflow.com/a/47172409/8145428 */
     const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
       new DataTransfer(); // specs compliant (as of March 2018 only Chrome)
   
     for (let file of fileBuffer) { dT.items.add(file); }
     fileField.files = dT.files;
   }
   

   위의 함수는 DOM 객체로 FileField와 소요되며 FileField와의 파일 목록의 파일의 인덱스 제거 할 따라 전달 및 FileField를 업데이트합니다.

   이 다른 사람에게 약간의 시간을 절약 희망!

   어떻게 파일리스트 객체에서 설정 파일의 객체 및 길이 속성에 파일도 FormData 객체에 반영됩니다 어디?

4. ---

   4.HTML

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

from https://stackoverflow.com/questions/19060378/how-to-remove-one-specific-selected-file-from-input-file-control by cc-by-sa and MIT license