web-dev-qa-db-ja.com

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

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

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

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

enter image description here

プレビュー表示を次のように表示したい： enter image description here

7media
53
Patrick Kenny

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()をスーパーシードしています。

[〜＃〜] update [〜＃〜]このモジュール用に sandbox project を作成しました。

94
Clive

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

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

現在、ユーザーはファイルを選択して[アップロード]ボタンを押す必要があります。多くの場合、ユーザーはボタンを押す必要があることに気づかず、画像がアップロードされていないときに誤ってアップロードされていると誤解していることがわかりました。

現在、D6およびD7で利用可能です

12
Cardo

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これを達成する方法については、よく知りません。

フィドル

8
niksmac

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);
4
drupal_stuff_alter

Plupload統合 モジュールを見てください。

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

3
uwe

AJAX formでファイルアップロードフィールドを使用する場合-送信後、自動アップロード機能が失われる可能性があります（ 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);
2
Eugene Fidelin