如何在选择文件时自动上载图像，而不是按上载按钮？

我有一个自定义内容类型，允许用户上传图像。我试图使界面尽可能简单。

内容类型包含一个图像字段。此方法有效，但是某些用户不知道该图像已上传，因为他们在选择后看不到该图像（要预览上传，必须按下上传按钮）。有没有一种方法可以跳过/自动按下上传按钮，以便在选择文件后立即显示图像？

换句话说，选择文件后立即显示以下图片，而不是下面的图片（其中显示了路径，但在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是用户界面（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是GPL许可的多文件上传工具，可以根据客户端计算机的功能显示Flash，Gears，HTML 5，Silverlight，BrowserPlus和HTML4中的小部件。

如果您在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);