WordPress 3.5 미디어 업로더 다중 파일 선택

WordPress 3.5 미디어 업로더 다중 파일 선택

커스텀 설정 페이지가 있는 WordPress 테마를 만들고 있습니다.일부 설정에서는 사용자가 이미지 세트를 업로드/추가해야 합니다(1개 이상).미디어 업로더의 기본 동작은 단일 이미지를 업로드 또는 선택하여 게시물에 삽입하는 것입니다.

미디어 업로더의 사용에 관한 이 훌륭한 가이드에 따라 복수의 설정을 true로 할 수 있는 것을 제안하고 있습니다만, 1개의 파일만 업로드 또는 선택할 수 있습니다.

제 코드는 다음과 같습니다.

커스텀 설정 페이지이므로 필요한 스크립트를 로드합니다.

if(function_exists( 'wp_enqueue_media' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style('thickbox');
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
}

Javascript/jQuery 미디어 업로더를 표시하고 선택한 이미지를 처리합니다.

var tgm_media_frame;

$('.upload-images').click(function() {

  if ( tgm_media_frame ) {
    tgm_media_frame.open();
    return;
  }

  tgm_media_frame = wp.media.frames.tgm_media_frame = wp.media({
    multiple: true,
    library: {
      type: 'image'
    },
  });

  tgm_media_frame.on('select', function(){
    var selection = tgm_media_frame.state().get('selection');
    selection.map( function( attachment ) {
      attachment = attachment.toJSON();
          console.log(attachment);
          // Do something with attachment.id and/or attachment.url here
    });
  });

  tgm_media_frame.open();

});

여러 개의 파일 선택을 제대로 할 수 있는 사람이 있습니까?내가 뭘 빼놓았나요?감사합니다!

옷만 갈아입으면 돼multiple:true로.multiple:'add'. 이것이 기본 Create Gallery 동작 방식입니다.

갱신하다

질의응답 후 미디어 업로더가 업데이트 된 것 같습니다.이전 버전의 워드프레스에서는multiple: 'add'다른 사용자가 제안한 옵션이 없습니다.잘 모르겠어요.

---

코드만 있으면 다 괜찮아.약간의 부품만 빠졌습니다.

selection.map( function( attachment ) {
    attachment = attachment.toJSON();
    $("#something").after("<img src=" +attachment.url+">");
});

끝나고attachment변환된toJSON매뉴얼에 기재되어 있는 대로 사용할 수 있습니다.이미지 URL을 서버에 게시하는 일부 숨김 필드에 배치하고 선택한 이미지를 사용자에게 동시에 표시할 수 있습니다.

조금 이상한 점은 +를 click눌러 이미지를 선택해야 한다는 것입니다.오히려 체크박스나 뭐 그런 거겠죠.

---

갱신하다

여러 이미지를 선택할 때 + 또는 click+가 워드프레스 방식으로 제공됩니다ctrl.click자세한 내용을 보려면 를 여십시오.

...\wp-displays\media-displays.displays.display

정의된 함수가 있습니다.toggleSelectionHandler. 사용자가 누른 키 조합을 듣고 그에 따라 특정 클래스를 변경하여 실제 선택을 유발하는 다른 기능을 호출합니다.

firbug 검사 후 두 가지 클래스가 적용됨을 알 수 있습니다.

1. selected
2. details

details클래스는 현재 클릭/액티브 선택(파란색 두꺼운 테두리 포함)에 대한 스타일을 정의합니다.selected는 실제로 이미지를 선택한 것으로 표시하고 선택 배열로 반환합니다.

이 동작은 파일 자체에서 변경할 수도 있고 선택을 처리하는 자체 함수를 작성할 수도 있습니다.하지만 첫 번째 접근은 좋지 않다.

PS : Wordpress는 실제로 위의 파일을 사용하지 않습니다.동일한 파일의 압축 버전을 선택합니다.따라서 압축되지 않은 파일을 로드하여 재생하는 것이 좋습니다.wordpress가 압축되지 않은 js 파일을 사용하도록 설정할 수 있습니다.

define('SCRIPT_DEBUG', true);

wp-config.php이것은, 다음의 동작을 건너뜁니다.load-scripts.php(「JS」 「Marge」 「Marge」 「Marge'의 'Marge'의 'Marge'의 'Marge'의 'Marge'의 'Marge'의 'Marge'가 됩니다).

만약 누군가가 이것을 어떻게 하는지 알고 싶어 한다면, 한 가지 방법은 이것이다.구현 범위 내의 기본 동작을 완전히 덮어씁니다.

wp.media.view.Attachment.prototype.toggleSelectionHandler = function( event ) {
    var method = 'between';
    if ( event.shiftKey ) {
        method = 'between';
    } else {
        method = 'toggle';
    }

    this.toggleSelection({
        method: method
    });
};

ifmultiple로 설정되어 있다.true갤러리 화면처럼 여러 항목을 선택할 수 있습니다.

언급URL : https://stackoverflow.com/questions/17473885/wordpress-3-5-media-uploader-multiple-file-select