trigger file upload dialog using javascript/jquery

instead of using <input type="file">, is it possible to use <input type="text"> and then script it using javascript or jquery such that when the text box is clicked, the file upload dialogue shows up.....(and have it actually uploaded when it's submitted into a form)

Solution 1:

You mean something like this?

http://jsfiddle.net/CSvjw/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    $('input[type=text]').val($(this).val());
});

Note, though, that the value given by the file input is fake for security reasons. If you want to just have the file name show up, you can cut out the slashes.

Here's an example of how to do it using a string split and an array pop:

http://jsfiddle.net/CSvjw/1/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';

    $('input[type=text]').val(val);
});

You can adjust this further to account for systems that use a forward slash as the directory separator. It's also important to note that if you do this, you'll lose the functionality of many modern browsers where users can drag files from their computer directly onto a file input. If I were you, I'd embrace that paradigm by styling the file input rather than trying to turn a text input into something that it is not.

Solution 2:

And if the HTML code has identical multiple inputs like this one below:-

<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>​​​​​​​​​​​​​​​​​​​​​

Expanding on @treeface's answer, the Jquery code (current version 1.8.0) would be:

$('input[type=text]').click(function() {
    $(this).parent(".item")
        .find('input[type=file]')
        .trigger('click');
});

$('input[type=file]').change(function() {
    $(this).parent(".item")
        .find('input[type=text]')
        .val($(this).val());
});​

Do take note between $parents() and $parent() in jQuery. Try it out @ http://jsfiddle.net/afxDC/