Question

This picture upload script does not work in google chrome but works well in firefox and internet explorer. Please can someone help?

$("a#picUpload").bind('click', function() {
    $(":input[type=file]").click();
});

Secondly, after selecting a picture and clicking the open button on the open dialogue box, i want the picture upload to start automatically after the open dialogue box unloads but I can’t figure out how to do this. The upload is ajax. Any suggestion? Thanks.

Answer 1

I think the first issue can be solved by introducing a space after ‘a’ before ‘#’. I assume that ‘picUpload’ is the id of anchor element. In that case you don’t have to use the ‘a’ at all. Just use ‘#picUpload’ for binding the click event to the element. I prefer the second method, where you use the #id alone to get the jQuery object of that element.

$("#picUpload").bind('click', function() {
    $(":input[type=file]").click();
});

I also suggest you to check your form for any other element having the same id as ‘picUpload’ element. Things can go wrong in that case.

To start upload of file automatically after the file is selected use the ‘change’ event of input:file element.

$('#fileUpload').change(function() {
    alert('changed');
    //call your ajax function for uploading file
});

For the above script to work, form should be as given below

<form>
   <a id='picUpload' href='#'>Upload picture</a>
    <input id='fileUpload' type="file"/>
</form>

Fiddle here: http://jsfiddle.net/deepumohanp/vvVWt/