input type = "file" javascript моделирование щелчка - PullRequest
Новая
       14

input type = "file" javascript моделирование щелчка

0 голосов
/ 13 марта 2011

Мне интересно, почему этот пример работает в Chrome 10, но не работает в Fx 3.6?IFAIK, точно ввод type = "file" щелчок там не работает ...

Может кто-нибудь объяснить, почему?

Ответы [ 4 ]

5 голосов
/ 13 марта 2011

Привет, Алекс Ивасюв,

Прочтите вашу проблему и взгляните на указанную вами страницу.

Вы направили событие нажатия кнопки на событие щелчка справа? Как я думаю, это не совсем возможно везде. Тип ввода файла обрабатывает всплывающие окна и загружает сам себя.

И, кажется, вы не можете вызвать всплывающее окно загрузки файла, просто вызвав событие click (). По крайней мере, это невозможно в браузерах, таких как Firefox, Opera, Chrome и т. Д. Но это возможно в IE, верно? (IE всегда ведет себя странно в любом случае ..!)

Я нашел несколько статей, которые могут помочь понять это. Проверь их. Вы решите проблему ...!

01. /153993/v-javascript-mozhno-li-programmno-vyzvat-sobytie-click-dlya-elementa-vvoda-faila

02. /1843333/dialogovoe-okno-otkrytiya-faila-v-javascript

С уважением, Адинамическая

2 голосов
/ 24 июня 2013

Я недавно прибегнул к помощи Google и решил придумать собственное решение.

Для тех, кто ищет решение, см. Мой репозиторий - Необычная загрузка jQuery Plugin

Это небольшой плагин для jQuery, но вы можете его отключить или использовать в качестве базы кода - что угодно!Он просто стилизует вашу стандартную кнопку загрузки и дает вам гораздо больше возможностей для настройки.

Код этого плагина можно увидеть ниже.Он может быть вызван для любого элемента загрузки файла, используя $ ('INPUT [type = file]'). FancyUpload (); 

$.fn.fancyUpload = function(data) {

    // generate unique ID for upload box and determine default text to use
    var uploadBox = $(this);
    var uniqID = Math.floor( Math.random() * 999999 );
    var defText = (data == "" || data == undefined || data.defaultText == "" || data.defaultText == undefined) ? 'Click here to add an Attachment' : data.defaultText;

    // hide the original upload box and replace with fancyUpload
    uploadBox.hide();
    uploadBox.before('<input class="fancyUpload" type="text" value="' + defText + '" id="uploadID'+uniqID+'" />').wrap('<div />');

    var newUploadBox = $('INPUT[type=text]#uploadID'+uniqID);

    // handle clicks on new upload box
    newUploadBox.click(function (e) {
        var _this = $(this);

        // blur the text box because we dont want to focus on it and emulate click on file upload
        _this.blur().siblings('div:first').children('INPUT[type=file]').click().bind('change', function (e) {
            // determine resulting file name by getting last element in full file path
            var filename = $(this).val().split("\\");
            filename = filename[filename.length-1];

            // set file name on emulated text box
            _this.attr({ 'value' : (filename == "" || filename == undefined) ? defText : 'Attachment: ' + filename }).addClass('fileOn');

            // handle form field resets (reset to defText)
            _this.parents('FORM:first').find('INPUT[type=reset]').click(function () {
                _this.attr({ 'value' : defText }).removeClass('fileOn');
            });
        });
    });
};
0 голосов
/ 19 февраля 2017 

<label><input type="file" name="fuckedfile" id="fuckedfile" style="display:none">
CLICK!</label><br/>
0 голосов
/ 15 января 2017

В Android (по соображениям безопасности) обработчик кликов, который первоначально получил щелчок пользователя, должен быть такой же логикой, которая отправляет щелчок элементу ввода файла. Таким образом, элемент ввода файла может быть скрыт (например, если вы хотите инициировать загрузку из выбора меню). Например, следующий код (содержится в JsFiddle: ): 

jQuery(function($) {
  $('#capture').on('click', function(e) {
    $('#file')[0].click();
  });
});
...