Home/ Questions/Q 7538001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T06:59:56+00:00

The idea is: you have a file field, which is hidden, and an image.

  • 0

The idea is: you have a file field, which is hidden, and an image. You use the image to show the select file dialog. Then I display the image in the 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);
});

On Firefox 10, ctx.drawImage(img,0,0); only works when I have the Firebug debugger nad breakpoint on that line. Without the breakpoint, it doesn’t work. I checked it on another clean profile.

On Chrome, $('#file-select').click(); doesn’t open the file dialog.

Edit: this question has been already answered. However, I have no idea what the issue with Firefox is. Any ideas?

I used these websites to create this code:

Edit 2:
I resolved the issue with the Firefox by doing this:
Behind the line var fileList = this.files;, I put:

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This will trigger the click event:

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

    Example:

    <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/

    Update:

    Indeed, if the input type="file" is display:none it will not pop up. Still you can make it invisible to the user by some CSS: position:absolute; top:-999px; left:-999px

    • 0