[jquery] 파일 입력을 지우는 방법

Program / 글쓴이

아래는 파일 입력과 “파일 지우기”버튼을 표시하는 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)하여 나를 위해 일했습니다.

답변

React 사용자 용

e.target.value = ""

그러나 파일 입력 요소가 다른 요소 ( htmlFor속성 포함) 에 의해 트리거 되면 이벤트가 없음을 의미합니다.

따라서 ref를 사용할 수 있습니다.

func 시작시 :

const inputRef = React.useRef();

입력 요소

<input type="file" ref={inputRef} />

그런 다음 onClick 함수 (예 :)에서 다음과 같이 작성할 수 있습니다.

inputRef.current.value = ""
  • React Classes에서-같은 생각이지만 생성자의 차이점 : this.inputRef = React.createRef()

답변

이것이 브라우저 간 가능하다는 것을 확신하려는 경우 또 다른 해결책은 태그를 제거 () 한 다음 추가 () 또는 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']"));

답변

이것은 작동합니다

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