업로드 버튼을 누르지 않고 파일 선택시 이미지를 자동으로 업로드하려면 어떻게합니까?

사용자가 이미지를 업로드 할 수있는 사용자 정의 컨텐츠 유형이 있습니다. 인터페이스를 가능한 한 단순하게 유지하려고합니다.

컨텐츠 유형에는 단일 이미지 필드가 포함됩니다. 작동하지만 일부 사용자는 선택한 후 이미지를 볼 수 없기 때문에 이미지가 업로드되었음을 이해하지 못합니다 (업로드를 미리 보려면 업로드 버튼을 눌러야 함). 파일을 선택한 직후 이미지가 표시되도록 업로드 버튼을 건너 뛰거나 자동으로 누르는 방법이 있습니까?

다시 말해, 다음 그림 대신 파일을 선택한 직후 (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().

업데이트이 모듈에 대한 샌드 박스 프로젝트 를 만들었습니다 .

이 상황에서는 누구나 자동 업로드 모듈을 사용해보십시오 .

자동 업로드는 사용자에게 필요한 클릭 수를 최소화하는 파일의 자동 업로드를 시작하는 UI (사용자 인터페이스) 향상 기능입니다.

현재 사용자는 파일을 선택한 다음 "업로드"버튼을 눌러야합니다. 우리는 종종 사용자가 버튼 누름이 필요하다는 것을 깨닫지 못하고 실수로 이미지가 업로드되지 않았다고 생각하는 것을 발견했습니다.

현재 D6 및 D7에서 사용할 수 있습니다

드루팔 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);