trigger file upload dialog using javascript/jquery

trigger file upload dialog using javascript/jquery

instead of using , is it possible to use 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)

Answer by Mike Ruhlin for trigger file upload dialog using javascript/jquery

You might want to look at one of the many available jQuery file uploader plugins rather than doing it yourself.

• Ajax Upload
• Uploadify

Answer by JLove for trigger file upload dialog using javascript/jquery

I have the suspicion that due to security reasons you wont be able to do this. I seem to remember a while back trying to set the value attribute of a file upload element which you can't do as you could pull specific files from a users computer without their consent. I'd imagine that this would extend to programmatically changing a text box to a file upload element as you could set the value of the text field to the file you wanted to add then change it's type to a upload element and submit the form.

It should be a simple enough thing to try although I'd think you're working within the limitations of Javascript and therefore if you can't do it in native JS you'd be unlikely to be able to use JQuery.

Hope this makes sense,

JLove

Answer by treeface for trigger file upload dialog using javascript/jquery

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.

Answer by Raghav for trigger file upload dialog using javascript/jquery

Dont use display:none or visibility:hidden initially in the css

In Jquery:

$(document).ready(function() {   $('#file').hide();    $("#elementToBeClicked").click(function(){     $('#file').click();   });  });  

Answer by Alvin K. for trigger file upload dialog using javascript/jquery

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

      
  
      
?????????????????????  

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/

Answer by zedecliff for trigger file upload dialog using javascript/jquery

i think you can bind the input text to a jquery/javascript function that will create an file input with code and the the user can now upload a file

   jquery   function upload(){     $('[input type='text']').append('')  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72