Drupal - How can I automatically upload images on file selection rather than pressing the upload button?

You'd be better off doing this at the module level, rather than the theme level, as the JS will not take effect for admin pages otherwise (unless of course you're using the same theme for both).

Here's a small module to provide this functionality system-wide:

File: auto_upload.info

name = Auto Upload
description = Removes the need for users to press the 'Upload' button for AJAX file uploads.
core = 7.x
dependencies[] = file

File: auto_upload.js:

(function ($) {
  Drupal.behaviors.autoUpload = {
    attach: function (context, settings) {
      $('form', context).delegate('input.form-file', 'change', function() {  
        $(this).next('input[type="submit"]').mousedown();
      }); 
    }
  };
})(jQuery);

File: auto_upload.module

function auto_upload_init() {
  drupal_add_js(drupal_get_path('module', 'auto_upload') . '/auto_upload.js');
}

Once you've installed the module all file inputs that are AJAX-ified (i.e. those that have an 'Update' button) will be affected...you won't need to press the 'Upload' button any more after selecting the file.

By using the delegate() method this will also work perfectly for file fields that allow multiple uploads, and also for fields that are loaded into the page as the result of an AJAX request.

I've tested that in Chrome, Safari and Firefox and it works a treat :)

Footnote: In the (probably very unlikely) event that your site is using jQuery 1.7, you should use the on() method, which has superseeded delegate().

UPDATE I've created a sandbox project for this module.

For anyone under this situation, try using the AutoUpload module.

AutoUpload is a user interface (UI) enhancement that initiates automatic upload of files minimizing the number of clicks required by a user.

Currently, users must select files, then press the "Upload" button. We found users often don't realize a button press is necessary and mistakenly think their image is uploaded when it's not.

It's currently available for D6 and D7

Drupal 6

Try something like this in your jQuery document ready

jQuery('.form-file').change( function() {   
  jQuery(this).next('.ahah-processed').click();
}); 

Paste the following in page.tpl or node.tpl

drupal_add_js("jQuery(document).ready(function() {
  jQuery('.form-file').change( function() { 
    jQuery(this).next('.ahah-processed').click();
  });   
});", 'inline');

I am unfamiliar about any Drupal way to achieve this.

fiddle