I am trying to trigger input tag to select a file by a button click though jquery. code example like the following
<input type="file" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
${'input_file').select("http://www.someimage.com/image.gif");
}
After hours of research, I still have not got the solution how I could make this happen.
Appreciate for any suggestion or solution
Thanks you
I was going to suggest:
$("#input-file").trigger("click");
but then I remembered there are security restrictions which prevent triggering and setting the values of file input dialogs.
There are some ways around it though, take a look at this question: https://stackoverflow.com/a/3030174/992435
You have typos in your codes... correct as follows;
<input type="file" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
$('#input_file').val("http://www.someimage.com/image.gif");
}
There were a couple of things wrong with your snippet. You were not using script tags, you had forgotten the '#' before ID selectors and you had a curly bracket after the dollar sign.
<input type="file" id="input_file/>
<button onclick="select_file()"/>
<script>
function select_file() {
$('#input_file').select("http://www.someimage.com/image.gif");
}
</script>
Although the way you are approaching your problem technically works, I would never recommend it since it can lead to unmaintainable code. A better approach would be something like:
<input type="file" id="input_file/>
<button class="changeInputButton" />
<script>
$('.changeInputButton').on('click', function () {
$('#input_file').val("http://www.someimage.com/image.gif");
});
</script>
You should use
<input type="hidden" id="input_file"/>
<button onclick="select_file()"/>
function select_file() {
$('input_file').val("http://www.someimage.com/image.gif");
}
The input type of file is used mainly for local file system files.
EDIT: Sorry about the typos
${' should be $('. Missed quote, too: file" />