Cách xóa đầu vào tệp

Dưới đây là một phần của mã jquery mà tôi có hiển thị đầu vào tệp và nút "Xóa tệp".

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

Bây giờ lý do tôi có nút "Xóa tệp" là vì nếu bạn nhấp vào nút, thì nó sẽ xóa bất kỳ thứ gì có trong đầu vào tệp. Làm cách nào để viết mã nó để nó thực sự xóa đầu vào tệp khi tôi nhấp vào nút "Xóa tệp"?

Điều này sẽ hoạt động:

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

Xóa đầu vào tệp với jQuery

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

Xóa đầu vào tệp bằng JavaScript

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

Đây là phương thức tôi cũng thích sử dụng nhưng tôi tin rằng bạn cần thêm tham số bool true vào phương thức clone để mọi sự kiện vẫn được gắn với đối tượng mới và bạn cần xóa nội dung.

    var input = $("#fileInput");

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

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

By Setting $("ID").val(null), đã làm việc cho tôi

cho người dùng React

e.target.value = ""

Nhưng nếu phần tử đầu vào tệp được kích hoạt bởi một phần tử khác (có htmlForthuộc tính) - điều đó có nghĩa là bạn không có sự kiện

Vì vậy, bạn có thể sử dụng ref:

ở đầu func:

const inputRef = React.useRef();

trên phần tử đầu vào

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

và sau đó trên một hàm onClick (ví dụ), bạn có thể viết

inputRef.current.value = "" 

• trong Lớp React - cùng một ý tưởng, nhưng khác biệt về hàm tạo: this.inputRef = React.createRef()

Một giải pháp khác nếu bạn muốn chắc chắn rằng thẻ này có khả năng chạy trên nhiều trình duyệt là xóa () thẻ và sau đó thêm () hoặc thêm trước () hoặc theo một cách khác, thêm lại một phiên bản mới của thẻ đầu vào có cùng thuộc tính .

<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']"));

Điều này hoạt động để

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

Tôi đã làm một cái gì đó như thế này và nó đang làm việc cho tôi

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

Trong trường hợp của tôi, các giải pháp khác không hoạt động ngoài cách này:

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

Tuy nhiên, nếu bạn có nhiều hơn 1 tệp đầu vào trên trang, nó sẽ đặt lại văn bản trên tất cả chúng.

lấy id đầu vào và đặt val là trống như bên dưới: Lưu ý: Không đặt khoảng cách giữa val trống dấu ngoặc kép val ("").

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

mã này hoạt động cho tất cả các trình duyệt và tất cả các đầu vào.

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