Chrome: вызвать событие нажатия с помощью jQuery (работает с Firefox) - PullRequest
Новая
       18

Chrome: вызвать событие нажатия с помощью jQuery (работает с Firefox)

1 голос
/ 23 февраля 2012

Идея такова: у вас есть поле файла, которое скрыто, и изображение. Вы используете изображение, чтобы показать диалог выбора файла. Затем я показываю изображение на холсте. 

<input id="ytfile-select" type="hidden" value="" name="Foto[image]" />
<input style="display:none" id="file-select" accept="image/*" 
name="Foto[image]" type="file" />
<img id="upload-image" src="/images/design/upload-image.png" 
alt="upload-image-button" />        
<canvas id="canvas">  
    Sorry, your browser doesn't support the &lt;canvas&gt; element.  
</canvas>  

$('#upload-image').click(function(){
  $('#file-select').click();
});


$('#file-select').bind('change',function(){
  var fileList = this.files;  
  var img = document.createElement("img");  
  img.classList.add("obj");  
  img.src = window.URL.createObjectURL(fileList[0]);  
  var ctx = document.getElementById('canvas').getContext("2d");
  ctx.drawImage(img,0,0);
});

В Firefox 10 ctx.drawImage(img,0,0); работает только тогда, когда У меня есть точка прерывания отладчика Firebug и эта строка. Без точки останова это не работает. Я проверил это на другом чистом профиле.

В Chrome $('#file-select').click(); не открывает диалоговое окно файла.

Редактировать : на этот вопрос уже дан ответ. Однако я понятия не имею, в чем проблема с Firefox. Есть идеи?

Я использовал эти сайты для создания этого кода:

Редактировать 2 : Я решил проблему с Firefox, выполнив это: За чертой var fileList = this.files; я поставил: 

reader = new FileReader();
reader.onload = function (event) {
    $('#display').append('<img src ="' + event.target.result + '">');
};
reader.readAsDataURL(fileList[0]);

Ответы [ 2 ]

3 голосов
/ 23 февраля 2012

Это вызовет событие click:

$('#file-select').trigger("click");

Пример: 

<input type="file" id="filesel" name="file" style="position:absolute;left:-999px;top:-999px" />
<a onclick="$('​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​#filesel').trigger('click');" href="#">click to open</a>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

JSFiddle demo: http://jsfiddle.net/t7P3v/

Обновление:

Действительно, если input type="file" равно display:none, оно не появится. Тем не менее, вы можете сделать его невидимым для некоторых CSS: position:absolute; top:-999px; left:-999px

1 голос
/ 23 февраля 2012

попробуйте этот код на jsfiddle.Я не могу вспомнить, где я скопировал этот плагин.

код плагина 

jQuery.fn.file = function(chooseHandler) {
    return this.each(function() {

        var element = $(this),
            element_name = element.attr('data-name'),
            element_id = element.attr('data-id');

        // check name of radio-group
        if (element_name == undefined) {
            alert('Error: fileInput must have name!');
        }

        var holder = $('<div></div>').appendTo(element).css({
            position:'absolute',
            overflow:'hidden',
            '-moz-opacity':'0',
            filter:'alpha(opacity: 0)',
            opacity:'0',
            zoom:'1',
            width:element.outerWidth()+'px',
            height:element.outerHeight()+'px',
            'z-index':1
        });

        var _input;

        var addInput = function() {
            _input = holder.html('<input name="' + element_name + '" type="file" style="border:none; position:absolute;cursor:pointer;">').find('input');

            if (element_id != undefined) {
                _input.attr('id', element_id);
            }

            if (chooseHandler) {
                _input.change(chooseHandler);
            }
          };

        var position = function(e) {
            holder.offset(element.offset());

            if (e) {
                _input.offset({left:e.pageX-_input.outerWidth()+25, top:e.pageY-10});
            }
        };

        addInput();

        element.mouseover(position);
        element.mousemove(position);
        position();        
    });
};

использование 

<div id="my-select" data-name="name-of-autogenerated-input-element" class="some custom button style"></div>


...
$("#my-select").file();
...