[html] FileList에서 파일을 제거하는 방법

Html / 글쓴이

HTML5를 사용하여 드래그 앤 드롭 방식의 업로드 웹 애플리케이션을 구축하고 있으며 파일을 div에 드롭하고 당연히 FileList 를 제공하는 dataTransfer 객체를 가져옵니다 .

이제 일부 파일을 제거하고 싶지만 방법이나 가능 여부를 모르겠습니다.

가급적이면 FileList에서 삭제하고 싶습니다. 나는 그들을 위해 아무 소용이 없습니다. 그러나 그것이 가능하지 않다면 대신 FileList와 상호 작용하는 코드에서 검사를 작성해야합니까? 번거로운 것 같습니다.

답변

선택한 파일 중 여러 개만 삭제하려면 할 수 없습니다. 파일 API는 작업은 초안 메모를 포함하는 연결된 :

HTMLInputElement인터페이스 [HTML5]을 갖는 판독 전용 FileList
속성을 […]
[강조 광산]

HTML 5 Working Draft의 일부를 읽고 Common inputelement API를 발견했습니다 . 다음 과 같이 개체 의 속성을 빈 문자열 로 설정 하여 전체 파일 목록을 삭제할 수 있습니다 .valueinput

document.getElementById('multifile').value = "";

BTW, 웹 응용 프로그램에서 파일 사용 기사 도 흥미로울 수 있습니다.

답변

이 질문은 이미 답변으로 표시되었지만 다른 사람들이 FileList를 사용하는 데 도움이 될 수있는 몇 가지 정보를 공유하고 싶습니다.

FileList를 배열로 취급하는 것이 편리 할 수 ​​있지만 sort, shift, pop 및 slice와 같은 메서드는 작동하지 않습니다. 다른 사람들이 제안했듯이 FileList를 배열에 복사 할 수 있습니다. 그러나 루프를 사용하는 대신이 변환을 처리하는 간단한 한 줄 솔루션이 있습니다.

 // fileDialog.files is a FileList 

 var fileBuffer=[];

 // append the file list to an array
 Array.prototype.push.apply( fileBuffer, fileDialog.files ); // <-- here

 // And now you may manipulated the result as required

 // shift an item off the array
 var file = fileBuffer.shift(0,1);  // <-- works as expected
 console.info( file.name + ", " + file.size + ", " + file.type );

 // sort files by size
 fileBuffer.sort(function(a,b) {
    return a.size > b.size ? 1 : a.size < b.size ? -1 : 0;
 });

FF, Chrome 및 IE10 +에서 정상적으로 테스트되었습니다.

답변

항상 인기있는 브라우저 (Chrome, Firefox, Edge, Safari 9 이상에서도 작동)를 대상으로하거나 폴리 필을 사용할 수있는 경우 다음 Array.from()과 같이 사용하여 FileList를 배열로 전환 할 수 있습니다 .

let fileArray = Array.from(fileList);

그러면 File다른 배열처럼 s 배열을 처리하기 쉽습니다 .

답변

우리는 HTML5 영역에 있기 때문에 이것이 나의 해결책입니다. 요점은 파일을 FileList에 두는 대신 Array에 푸시 한 다음 XHR2를 사용하여 파일을 FormData 객체로 푸시한다는 것입니다. 아래 예.

Node.prototype.replaceWith = function(node)
{
    this.parentNode.replaceChild(node, this);
};
if(window.File && window.FileList)
{
    var topicForm = document.getElementById("yourForm");
    topicForm.fileZone = document.getElementById("fileDropZoneElement");
    topicForm.fileZone.files = new Array();
    topicForm.fileZone.inputWindow = document.createElement("input");
    topicForm.fileZone.inputWindow.setAttribute("type", "file");
    topicForm.fileZone.inputWindow.setAttribute("multiple", "multiple");
    topicForm.onsubmit = function(event)
    {
        var request = new XMLHttpRequest();
        if(request.upload)
        {
            event.preventDefault();
            topicForm.ajax.value = "true";
            request.upload.onprogress = function(event)
            {
                var progress = event.loaded.toString() + " bytes transfered.";
                if(event.lengthComputable)
                progress = Math.round(event.loaded / event.total * 100).toString() + "%";
                topicForm.fileZone.innerHTML = progress.toString();
            };
            request.onload = function(event)
            {
                response = JSON.parse(request.responseText);
                // Handle the response here.
            };
            request.open(topicForm.method, topicForm.getAttribute("action"), true);
            var data = new FormData(topicForm);
            for(var i = 0, file; file = topicForm.fileZone.files[i]; i++)
                data.append("file" + i.toString(), file);
            request.send(data);
        }
    };
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("Drop files or click here."));
    var handleFiles = function(files)
    {
        for(var i = 0, file; file = files[i]; i++)
            topicForm.fileZone.files.push(file);
    };
    topicForm.fileZone.ondrop = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
        handleFiles(event.dataTransfer.files);
    };
    topicForm.fileZone.inputWindow.onchange = function(event)
    {
        handleFiles(topicForm.fileZone.inputWindow.files);
    };
    topicForm.fileZone.ondragover = function(event)
    {
        event.stopPropagation();
        event.preventDefault();
    };
    topicForm.fileZone.onclick = function()
    {
        topicForm.fileZone.inputWindow.focus();
        topicForm.fileZone.inputWindow.click();
    };
}
else
    topicForm.fileZone.firstChild.replaceWith(document.createTextNode("It's time to update your browser."));

답변

나는 이것에 대한 매우 빠르고 짧은 해결 방법을 찾았습니다. 많은 인기있는 브라우저 (Chrome, Firefox, Safari)에서 테스트되었습니다.

먼저 FileList를 배열로 변환해야합니다.

var newFileList = Array.from(event.target.files);

특정 요소를 삭제하려면 이것을 사용하십시오.

newFileList.splice(index,1);

답변

나는 이것이 오래된 질문이라는 것을 알고 있지만이 문제와 관련하여 검색 엔진에서 높은 순위를 차지하고 있습니다.

FileList 개체의 속성은 삭제할 수 없지만 적어도 Firefox 에서는 변경할 수 있습니다 . 이 문제의 해결 방법 IsValid=true은 검사를 통과 한 파일과 그렇지 않은 파일에 속성을 추가하는 것 IsValid=false입니다.

그런 다음 목록을 반복 IsValid=true하여 FormData에 속성 만 추가 되었는지 확인합니다 .

답변

이 작업을 수행하는 더 우아한 방법이있을 수 있지만 여기에 내 해결책이 있습니다. Jquery 사용

fileEle.value = "";
var parEle = $(fileEle).parent();
var newEle = $(fileEle).clone()
$(fileEle).remove();
parEle.append(newEle);

기본적으로 입력 값을 계산합니다. 그것을 복제하고 이전 복제 대신 복제하십시오.