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 <canvas> 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]);
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
position:absolute; top:-999px; left:-999px
try this code on jsfiddle. I cant remember where I copy this plugin.
plugin code
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();
});
};
usage
<div id="my-select" data-name="name-of-autogenerated-input-element" class="some custom button style"></div>
...
$("#my-select").file();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.