Хром: событие click click с jQuery (оно работает с Firefox)

Идея: у вас есть скрытое изображение и изображение. Вы используете изображение для отображения диалогового окна выбора файла. Затем я показываю изображение на холсте.Хром: событие click click с jQuery (оно работает с Firefox)

<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(); не открывается диалоговое окно файла.

Edit: этот вопрос уже ответил. Однако я понятия не имею, что такое проблема с 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]);

источник

2012-02-23 Jakub

Констатируя очевидное, но ваш скрипт внутри ''

попробуйте this code на 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();

источник

2012-02-23 16:24:03 komelgman

Спасибо. Что делает этот код? Отображает ли это только диалоговое окно файла или отображает изображение? Я попробовал, но изображение не было показано на firefox и chrome. – Jakub

hm .. этот код показать изображение и скрытый ввод файла под изображение ... попробуйте установить другое изображение url – komelgman

Я вижу изображение, когда я нажимаю на него, я получаю диалог с файлом. – Jakub

Смежные вопросы