jquery - Chrome : trigger click event with jQuery (it works with Firefox)

Question

这个想法是:你有一个隐藏的文件字段和一个图像。您使用该图像来显示选择文件对话框。然后我在 Canvas 中显示图像。

<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 的问题是什么。有什么想法吗？

我使用这些网站来创建此代码:

• https://developer.mozilla.org/en/using_files_from_web_applications
• http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

编辑 2:我通过这样做解决了 Firefox 的问题:在 var fileList = this.files; 行后面，我输入:

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

Answer 1

这将触发click事件:

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

示例:

<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 演示:http://jsfiddle.net/t7P3v/

更新:

事实上，如果input type="file"是display:none，它就不会弹出。您仍然可以通过一些 CSS 使其对用户不可见: position:absolute;顶部:-999px；左:-999px