アップロードボタンを押すのではなく、ファイル選択時に画像を自動的にアップロードするにはどうすればよいですか？

ユーザーが画像をアップロードできるカスタムコンテンツタイプがあります。インターフェースをできるだけシンプルにしようとしています。

コンテンツタイプには単一の画像フィールドが含まれます。これは機能しますが、一部のユーザーは、選択後に画像が表示されないため、画像がアップロードされたことを理解しません（アップロードをプレビューするには、アップロードボタンを押す必要があります）。ファイルを選択した直後に画像が表示されるように、アップロードボタンをスキップ/自動的に押す方法はありますか？

言い換えると、次の画像の代わりにファイルを選択した直後（パスは表示されますが、Firefoxでは読みにくい）：

プレビュー表示を次のように表示したいと思います。

テーマレベルではなくモジュールレベルでこれを行うと、JSが管理ページに影響を与えないため（もちろん、両方に同じテーマを使用している場合を除き）、これを行う方が良いでしょう。

この機能をシステム全体に提供する小さなモジュールを次に示します。

ファイル：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

ファイル：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);

ファイル：auto_upload.module

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

モジュールをインストールすると、AJAX対応のすべてのファイル入力（つまり、[更新]ボタンがある入力）が影響を受けます。ファイルを選択した後に[アップロード]ボタンを押す必要はありません。 。

delegate()メソッドを使用することにより、これは複数のアップロードを許可するファイルフィールド、およびAJAXリクエストの結果としてページにロードされるフィールドに対しても完全に機能します。

私はそれをChrome、Safari、Firefoxでテストしましたが、うまくいきます:)

脚注：サイトでjQuery 1.7を使用している（おそらく非常に可能性が低い）イベントon()では、スーパーシードされたメソッドを使用する必要がありdelegate()ます。

更新このモジュールのサンドボックスプロジェクトを作成しました。

このような状況の場合は、AutoUploadモジュールを使用してみてください。

AutoUploadは、ファイルの自動アップロードを開始するユーザーインターフェイス（UI）拡張機能であり、ユーザーが必要とするクリック数を最小限に抑えます。

現在、ユーザーはファイルを選択し、[アップロード]ボタンを押す必要があります。ユーザーはボタンを押す必要があることに気付かないことが多く、イメージがアップロードされていないと誤ってアップロードされていると誤解します。

現在D6とD7で利用可能です

Drupal 6

jQueryドキュメントで次のようなものを試してください

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

次をpage.tplまたはnode.tplに貼り付けます

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

私はこれを達成するためのDrupalの方法についてはよく知りません。

フィドル

を使用して達成できon()ます。delegate()廃止されました。

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

Plupload統合モジュールをご覧ください。

Pluploadウィジェットが複数のファイルとDrupalをアップロードするための統合を提供します。Pluploadは、クライアントコンピューターの機能に応じて、Flash、Gears、HTML 5、Silverlight、BrowserPlus、およびHTML4でウィジェットを表示できるGPLライセンスの複数ファイルアップロードツールです。

AJAXフォームでファイルアップロードフィールドを使用する場合-送信後に自動アップロード機能を失う可能性があります（https://drupal.stackexchange.com/a/31453/7313を参照）

修正するには-このスクリプトを使用します

(function($) {

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

})(jQuery);