IT박스

파일 입력을 지우는 방법

itboxs 2020. 12. 10. 19:43
반응형

파일 입력을 지우는 방법


아래는 파일 입력과 "파일 지우기"버튼을 표시하는 jquery 코드의 일부입니다.

var $imagefile = $('<input />').attr({
    type: 'file',
    name: 'imageFile',
    class: 'imageFile'
});

$image.append($imagefile);

var $imageclear = $('<input />').attr({
    type: 'button',
    name: 'imageClear',
    class: 'imageClear',
    value: 'Clear File'
});

$image.append($imageclear);

이제 "파일 지우기"버튼이있는 이유는 버튼을 클릭하면 파일 입력에있는 모든 항목이 지워지기 때문입니다. "파일 지우기"버튼을 클릭 할 때 실제로 파일 입력을 지우도록 코드화하는 방법은 무엇입니까?


이것은 작동합니다.

$imageClear.on('click', function() { 
    $imageFile.val(''); 
});

jQuery로 파일 입력 지우기

$("#fileInputId").val(null);

JavaScript로 파일 입력 지우기

document.getElementById("fileInputId").value = null;

이 방법도 사용하고 싶지만 이벤트가 새 개체와 연결된 상태로 유지되도록하려면 bool true 매개 변수를 clone 메서드에 추가해야하고 내용을 지워야한다고 생각합니다.

    var input = $("#fileInput");

    function clearInput() {
        input = input.val('').clone(true);
    };

https://api.jquery.com/clone/


설정 $("ID").val(null)하여 나를 위해 일했습니다.


이것이 브라우저 간 가능하다는 것을 확신하려는 경우 또 다른 해결책은 태그를 제거 () 한 다음 추가 () 또는 prepend ()하거나 다른 방법으로 동일한 속성을 가진 입력 태그의 새 인스턴스를 다시 추가하는 것입니다. .

<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
 <input type="file" name="fileinput" id="fileinput" />
</label>
</form>

$("#fileinput").remove();
$("<input>")
  .attr({
    type: 'file',
    id: 'fileinput',
    name: 'fileinput'
    })
  .appendTo($("label[for='fileinput']"));

나는 이와 같은 일을했고 그것은 나를 위해 일하고 있습니다.

$('#fileInput').val(null); 

제 경우에는 다른 솔루션이 이런 식으로 작동하지 않았습니다.

$('.bootstrap-filestyle :input').val('');

그러나 페이지에 두 개 이상의 파일 입력이있는 경우 모든 파일의 텍스트가 재설정됩니다.


입력 ID를 가져오고 다음과 같이 val을 입력합니다. 참고 : val 빈 큰 따옴표 val ( "") 사이에 공백을 두지 마십시오.

 $('#imageFileId').val("")

이 코드는 모든 브라우저와 모든 입력에서 작동합니다.

$('#your_target_input').attr('value', '');

이것은 작동합니다

 $("#yourINPUTfile").val("");

참고 URL : https://stackoverflow.com/questions/9617738/how-to-clear-file-input

반응형