First, we need to have a style for our inputbox and button.., that is actually for you to decide on how you want it to be.
Second, setup the HTML with the input file type element together with a styled inputbox and button. Please see below on how it will look like and take note of the id attribute I put in to be use for jQuery.
<input type="text" id="inputbox" name="inputbox" class="myinputbox"/>
<input type="button" id="button" name="button" class="mybutton"/>
<input type="file" id="inputfile" name="inputfile"/>
Once you've setup your HTML, we need to use the jQuery to trigger the #inputfile whenever we click on #inputbox or #button. Please see below.
$('#inputbox, #button').click(function() {
$('#inputfile').trigger('click');
});
We also need to get the value of the #inputfile and change the value of the styled #inputbox as it changes. This is normally the filename of the file you selected on the open file dialog box.
$('#inputfile').change(function() {
var data = $(this).val();
var file = data.length ? data.split('\\').pop() : '';
$('#inputbox').val(file);
});
Now, whenever you click on #inputbox and #button, the open file dialog box should appear and any change of value on #inputfile should reflect on #inputbox.
Lastly, we need to hide the #inputfile and retain the styled #inputbox and #button with a functional input file type element.
We can't use style="display:none" coz in some browsers JS will not work if the element is HIDE. So, the best way to do it is to set the opacity to "0" zero. This is a simple cheat to hide the elements without disabling them.
You will also have to consider other browsers, so the style should support all browsers. Please see below.
-moz-opacity:0;
filter:alpha(opacity:0);
opacity:0;
In summary, your HTML script should be like this.
<html>
<head>
<title>How to put a style on input file type using CSS and jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="text" id="inputbox" name="inputbox" class="myinputbox"/>
<input type="button" id="button" name="button" class="mybutton"/>
<input type="file" id="inputfile" name="inputfile" style="opacity:0"/>
</body>
<html>
<script type="text/javascript">
$(document).ready(function() {
$('#inputbox, #button').click(function() {
$('#inputfile').trigger('click');
});
$('#inputfile').change(function() {
var data = $(this).val();
var file = data.length ? data.split('\\').pop() : '';
$('#inputbox').val(file);
});
});
</script>
Hope this helps a lot of developers.
Please see also my new post "File upload with style using jQuery and CSS".
No comments:
Post a Comment