Как определить, когда отменить нажатие на ввод файла?

Question

Как я могу определить, когда пользователь отменяет ввод файла с помощью ввода файла html?

onChange позволяет мне определять, когда они выбирают файл, но я также хотел бы знать, когда они отменяют (закрывают диалог выбора файла, ничего не выбирая).

Answer 1

function file_click() {
    document.body.onfocus = () => {
        setTimeout(_=>{
            let file_input = document.getElementById('file_input');
            if (!file_input.value) alert('please choose file ')
            else alert(file_input.value)
            document.body.onfocus = null
        },100)
    }
}

Использование setTimeout для получения определенного значения ввода.

Answer 2

Ну, это не совсем отвечает на ваш вопрос.Я предполагаю, что у вас есть сценарий, когда вы добавляете ввод файла и запускаете выбор файла, и если пользователь нажимает кнопку отмены, вы просто удаляете ввод.

Если это так, то: Почему добавлениеввод пустого файла?

Создать файл на лету, но добавлять его в DOM только после его заполнения. Вот так:

    var fileInput = $("<input type='file' name='files' style='display: none' />");
    fileInput.bind("change", function() {
        if (fileInput.val() !== null) {
            // if has value add it to DOM
            $("#files").append(fileInput);
        }
    }).click();

Итак, я создаюна лету, привязать его к событию изменения, а затем немедленно вызвать щелчок.Изменения сработают только тогда, когда пользователь выберет файл и нажмет Ok, иначе ввод не будет добавлен в DOM, поэтому не будет отправлен.

Рабочий пример здесь: https://jsfiddle.net/69g0Lxno/3/

Answer 3

Я нашел этот атрибут, его самый простой из всех.

if ($('#selectedFile')[0].files.length > 1)
{
   // Clicked on 'open' with file
} else {
   // Clicked on 'cancel'
}

Здесь selectedFile - это input type=file.

Answer 4

Мне нужно было это сделать, и в итоге я создал очень простое решение. Можно увидеть здесь: http://jsfiddle.net/elizeubh2006/1w711q0y/5/

(Но будет работать только после первого выбора файла. Для меня это было полезно, потому что событие onchange вызывалось, даже когда пользователь нажимал кнопку отмены. Пользователь выбрал файл, затем щелкнул, чтобы выбрать другой файл, но отменил и обмен был вызван.)

   $("#inputFileId").on("change", function() {
 var x = document.getElementById('inputFileId');
    if(x.files.length == 0)
    {
    alert('cancel was pressed');
    }
    else
    {
        alert(x.files[0].name);
    }

});

Answer 5

Вот мое решение, используя фокус ввода файла (не используя таймеры)

var fileInputSelectionInitiated = false;

function fileInputAnimationStart() {
    fileInputSelectionInitiated = true;
    if (!$("#image-selector-area-icon").hasClass("fa-spin"))
        $("#image-selector-area-icon").addClass("fa-spin");
    if (!$("#image-selector-button-icon").hasClass("fa-spin"))
        $("#image-selector-button-icon").addClass("fa-spin");
}

function fileInputAnimationStop() {
    fileInputSelectionInitiated = false;
    if ($("#image-selector-area-icon").hasClass("fa-spin"))
        $("#image-selector-area-icon").removeClass("fa-spin");
    if ($("#image-selector-button-icon").hasClass("fa-spin"))
        $("#image-selector-button-icon").removeClass("fa-spin");
}

$("#image-selector-area-wrapper").click(function (e) {
    $("#fileinput").focus();
    $("#fileinput").click();
});

$("#preview-image-wrapper").click(function (e) {
    $("#fileinput").focus();
    $("#fileinput").click();
});

$("#fileinput").click(function (e) {
    fileInputAnimationStart();
});

$("#fileinput").focus(function (e) {
    fileInputAnimationStop();
});

$("#fileinput").change(function(e) {
    // ...
}

Answer 6

Вы можете сделать слушатель изменения jquery в поле ввода и определить, что пользователь отменяет или закрывает окно загрузки по значению поля.

, вот пример:

//when upload button change
$('#upload_btn').change(function(){
    //get uploaded file
    var file = this.files[0];

    //if user choosed a file
    if(file){
        //upload file or perform your desired functiuonality
    }else{
        //user click cancel or close the upload window
    }
});

Answer 7

Если вам уже требуется JQuery, это решение может сработать (это именно тот код, который мне действительно нужен в моем случае, хотя использование Promise просто заставляет код ждать, пока выбор файла не будет решен):

await new Promise(resolve => {
    const input = $("<input type='file'/>");
    input.on('change', function() {
        resolve($(this).val());
    });
    $('body').one('focus', '*', e => {
        resolve(null);
        e.stopPropagation();
    });
    input.click();

});

Answer 8

тип ввода = код файла:

onchange="if(this.files[0]!=undefined){ UploadImg(); }else{ alert('cancel'); }"