Simulate click on browse button like Flash using jQuery
In this article I’m going to show you how to create a flash style browse button without the ugly input field similar to the flash one WordPress uses for their upload forms.
First thing we need to do is create the button element that when clicked will launch the file selection window.
Next we’ll create the css styles for the button to make it look similar to the button WordPress uses. We are going to use the new CSS3 border-radius property to achieve the rounded edge result without the need for a background image, as well as a background gradient. You will see a rectangular button if your browser does not support the border-radius property (or a vendor-prefixed alternative version) and a solid white background on the button if CSS3 gradients aren’t supported.
button {
border: #666666 1px solid;
text-shadow: 0 1px 0 #FFFFFF;
color: #464646;
cursor: pointer;
font-size: 11px !important;
line-height: 13px;
padding: 4px 30px;
text-decoration: none;
-moz-border-radius: 11px;
border-radius: 11px;
background: #ffffff;
background-image: -webkit-gradient(linear, left bottom,left top,color-stop(0, rgb(235,235,235)),color-stop(1, rgb(255,255,255)));
background-image: -moz-linear-gradient(center bottom,rgb(235,235,235) 0%,rgb(255,255,255) 100%);
}
You should now have a button looking similar to this one (as long as you don’t have a poop browser that doesn’t support these CSS3 styles).
Once we have our button created we will add a form consisting of a standard file input element.
Please note that some attributes were removed for readability. (ie: action, method, etc.)
We also need to hide the form from viewers since the button will be doing all of the magic. The option below is a trick that will set the form off the edge of the page by -99999px. Any strategy you have to hide the form will work, however not every browser will allow the click event to be binded to the browse button if you try and use display: none on the form element .
form {
position: absolute;
left: -99999px;
}
Next we will use jQuery to bind the click event to the newly created button. Here we provide an anonymous callback function which will then trigger the click event on the file input field causing the file selection window to open.
$('button').bind('click', function() {
$('input ||').trigger('click');
});
Please note that we are using the input || attribute selector and the ‘button’ element selector for demonstration purposes only. I recommend using an “id” attribute to avoid binding to all file input fields and buttons on the page.
Now that we have everything in place we need to add the final piece of functionality. We need to have the form submit automatically once the file is chosen instead of the standard submit button process. We will setup a listener for the change event on the file input field value and when it’s triggered – submit the form! UPDATED: $(‘form’).submit(); does not work on all browsers when its wrapped inside the change bind, so instead we are going to trigger the click event of the forms submit button.
$('input ||').bind('change', function() {
$('#submit-btn').trigger('click');
});
I always recommended passing a function containing your event listeners to the jQuery .ready() method to ensure they get executed once the DOM is ready. If you fail to do this step, you run the risk of your code trying to bind to the button element that might not yet exist, resulting in nothing happening when the button is clicked. So, it only makes sense that we follow that philosophy in this tutorial.
$(document).ready(function() {
$('button').bind('click', function() {
$('input ||').trigger('click');
});
$('input ||').bind('change', function() {
$('form').submit();
});
});
No we that we’ve gone over each piece separately, lets tie it all together! You can copy and paste the code below into a new HTML document to see a working version of everything we’ve covered in this tutorial.
You can see a working example of this code at http://www.readysetraphael.com.
Excellent article! Been look all over for something like this! All of the other sites have css quirks mode hack that don’t product the desired result on all browsers.
This is friggin’ awesome…
I am working on something similar and our approach to solving this is the same, but it works only in firefox…
Great article!
Thanks and sorry I haven’t updated the tutorial yet. The reason it only works on firefox is the other browsers won’t bind to the form elements because the form has display: none set on it. The trick is the have the form accessible just not visible to the viewers. You can accomplish this by setting the left property to -99999px (or any number you choose) or wrapping the form in a container and setting its width and height to 1px with an overflow proprty of ‘hidden’. I did this here and it seems to be working on all browsers. http://www.readysetraphael.com. Hopefully that helps!
My form is visible, and I didn’t hide file input field and the problem still persist. File browser appears and when I choose a file the form wont submit. The problem is, I think, behavior of field input. It doesn’t catch onchange events.
This also will not work:
You are correct. I changed replaced the functionality with this and it works great.
// Bind change event so when svg is selected is will
// auto-trigger form submission
$(‘input[type=”file”]’).bind(‘change’, function() {
// ID of submit button
$(‘#svgForm-submit’).trigger(‘click’);
});
Not sure why this is button when I trigger the click of the submit button it works fine. Does this work for you?
In my case, in IE9 it now does submit when I submit the form using the submit button ID, however the file isn’t actually being sent.
$(‘button’).bind(‘click’, function() {
$(‘input[type=”file”]’).trigger(‘click’);
});
$(‘input[type=”file”]’).bind(‘change’, function() {
alert(“halt”);
// $(‘#submit-btn’).trigger(‘click’);
});
when displaying an alert, you can see the file field being populated as expected, however once you’ve closed the alert it disappears, so the file is being removed before the form is being submitted.
In Firefox all methods work fine.
I don’t want to auto submit, so i didn’t include the code:
$(‘input[type=”file”]’).bind(‘change’, function() {
$(‘#submit-btn’).trigger(‘click’);
});
Yet, it appears whenever I click the select files button, the form submits (and fails).
Aw$ome!
I don’t like it
You know? After browsing for 2 hours, your post is the easiest to follow!
Thank you. Finally I can create my own upload form.
You’re welcome. I appreciate the comment!