it-swarm-ko.tech

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

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

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

다시 말해, 파일을 선택한 직후에 다음 그림 대신에 경로가 표시되지만 Firefox에서는 읽기가 어렵습니다.

enter image description here

미리보기 디스플레이를 다음과 같이 표시하고 싶습니다. enter image description here

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에서 테스트했으며 처리 방식으로 작동합니다. :)

Footnote : 사이트에서 jQuery 1.7을 사용하는 (아마도 가능성이 거의없는) 이벤트에서 on() 메소드를 사용해야합니다. delegate().

[~ # ~] update [~ # ~] 이 모듈에 대해 sandbox project 을 만들었습니다.

94
Clive

이 상황에서는 누구나 AutoUpload 모듈을 사용해보십시오.

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

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

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

12
Cardo

드루팔 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 integration 모듈을 살펴보십시오.

여러 파일을 업로드하기 위해 Plupload 위젯과 Drupal을 통합합니다. Plupload는 클라이언트 컴퓨터의 기능에 따라 Flash, Gears, HTML 5, Silverlight, BrowserPlus 및 HTML4로 위젯을 표시 할 수있는 GPL 라이센스 다중 파일 업로드 도구입니다.

3
uwe

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);
2
Eugene Fidelin