Можно ли удалить файл из файла типа ввода без перезагрузки страницы?

Question

Здравствуйте, я хочу удалить файл, выбрать вход внутри формы, но когда я удаляю его, перезагружаю страницу и теряю все, что я написал в оставшейся части формы, это будет система HelpDesck для пользователя и было бы неприятно переписывать каждый раз, когда вы удаляете файл. Можно ли как-нибудь выполнить эту операцию без перезагрузки страницы и возможности прикрепить к ней другой файл?

форма

<form id="frm" enctype="multipart/form-data">
            <h4>Novo Comentário</h4>
            <hr />
            <input type="text" id="id_chamado_comentario" value="@Model.id" hidden />

            <label class="col-form-label">Título</label>
            <input id="titulo_anotacao" type="text" class="form-control" />

            <label class="col-form-label">Anotação</label>
            <textarea id="anotacao" class="form-control"></textarea>

            <label class="col-form-label">Anexo</label>
            <input type="file" id="anexopost" name="anexopost" class="form-control">
            <button id="BtnLimpar" style="display:none">Limpar</button>
            <br />

            <button type="button" class="btn btn-outline-primary" id="btn_salvar_anotacao" onclick="createAnotacao()">Salvar</button>
        </form>

javascript

$('#anexopost').on('change', function () {
    var extension = this.files[i].name.split('.')[1]

    if (validExt.indexOf(extension) == -1) {

        Swal.fire({
            title: 'Arquivo Invalido',
            text: "O Anexo só permite os seguintes tipos jpg, jpeg,png, docx, xlsx, word, xls, csv, pdf",
            icon: 'error',
        })
        $("#BtnLimpar").show();
        $('#btn_salvar_anotacao').prop("disabled", true);

    }
    else {
        $('#btn_salvar_anotacao').prop("disabled", false);
    }
})

$("#BtnLimpar").click(function () {
    $('#btn_salvar_anotacao').prop("disabled", false);
    $('#anexopost').val('');
    $(this).hide();
});


function createAnotacao() {




    $('#btn_salvar_anotacao').prop("disabled", true);
    // Adicionar loading no botão
    $('#btn_salvar_anotacao').html(
        '<span id="loading_anotacao" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
    );



    var formData = new FormData();

    var files = $('#anexopost').get(0).files;

    formData.append("titulo_anotacao", $('#titulo_anotacao').val());
    formData.append("anotacao_texto", $('#anotacao').val());
    formData.append("chamados", $('#id_chamado').val());
    formData.append("anotacao_anexo", files[0]);

    $.ajax({
        url: '/Chamados/CreateAnotacao',
        type: 'POST',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {

            location.reload();
        },
        error: function (data) {
            $('#btn_salvar_anotacao').prop("disabled", false).text("Salvar");
            $('#loading_anotacao').remove();
            swal({ title: 'Ops!', text: 'Houve um erro ao tentar salvar o contéudo. Por favor, contate minha equipe de suporte.', icon: 'error', timer: 10000, button: 'OK!' });
        }
    });


}

Я благодарю вас за вашу помощь

Answer 1

Я не уверен, но вы можете попробовать что-то вроде этого:

    $("#BtnLimpar").click(function (e) {
    e.preventDefault();
// rest of the function