Plupload Intergration ใน meta-box หรือไม่


32

ฉันรู้ว่า plupload จะเป็นเครื่องมืออัปโหลดใหม่สำหรับ WordPress 3.3 แต่ฉันสงสัยว่ามีเอกสารใดบ้างเกี่ยวกับวิธีที่มันทำงานร่วมกับ WordPress หรือไม่

ฉันจะรวบรวมการตอบสนองจากวัตถุplUpload jQuery ของฉันโดยเฉพาะเมื่อมันอัปโหลดสื่อที่คุณต้องการและวิธีการที่จะใช้ฟังก์ชั่นเดียวกันในกล่องเมตาเพื่อสร้างแกลเลอรี่?

มีใครเล่นด้วยบ้างหรือยัง


ขอบคุณสำหรับความโปรดปรานแม้ว่าจะมีโอกาสที่ดีคำตอบก็จะไม่เกิดขึ้นจนกว่า WordPress 3.3 จะเปิดตัวอย่างเป็นทางการ
Manny Fleurmond

3
นอกจากนี้ยังมีโอกาสที่ดีที่ฉันจะดูวันหยุดสุดสัปดาห์นี้ :-) ฉันใช้ 3.3 เป็นเวลาหลายเดือนแล้วและต้องเขียนสิ่งนี้ก่อนที่ RC ตัวแรกจะลง ...
EAMann

นี่คือลิงก์ไปยังปลั๊กอิน jQuery ที่ผู้อัปโหลดใหม่ใช้คือ plupload ( plupload.com ) ฉันมีส่วนสำคัญเกี่ยวกับวิธีการใช้งาน แต่ไม่สามารถบอกได้ว่าการใช้งานใหม่ได้รับการตอบสนองอย่างไรเมื่ออัปโหลดไฟล์สำเร็จ
Manny Fleurmond

คำตอบ:


18

ฉันจะรวบรวมการตอบสนองจากวัตถุ plUpload jQuery ของฉันโดยเฉพาะเมื่อมันอัปโหลดสื่อที่คุณต้องการและวิธีการที่จะใช้ฟังก์ชั่นเดียวกันในกล่องเมตาเพื่อสร้างแกลเลอรี่?

/wp-includes/js/plupload/handlers.dev.jsมีเฉพาะไฟล์ที่จัดการการทำงานนี้คือ: ไฟล์นี้มี hooks และทริกเกอร์ทั้งหมดที่ผูก Plupload (ระบบลาก / วางหลายไฟล์ของบุคคลที่สาม) ไปยังผู้อัปโหลด

มีสองเหตุการณ์ที่คุณอาจต้องการดู: "FileUploaded" และ "Upload Complete"

FileUploaded

โปรดจำไว้ว่าผู้อัปโหลดใหม่สามารถอัปโหลดหลายไฟล์พร้อมกันได้ ดังนั้นหากมีสิ่งที่คุณต้องการทำหลังจากอัปโหลดแต่ละไฟล์ในคิวคุณจะใช้ jQuery เพื่อเชื่อมโยงกับกิจกรรมนี้

ตัวอย่างเช่น WordPress ผูกดังต่อไปนี้:

uploader.bind('FileUploaded', function(up, file, response) {
    uploadSuccess(file, response.response);
});'

uploadSuccessฟังก์ชั่นที่นี่จับภาพขนาดเล็ก, เมตาเรียกสิ่งที่แนบมาจากเซิร์ฟเวอร์และผูกแก้ไข / ลบปุ่มไปยังวัตถุที่เหมาะสม

UploadComplete

เหตุการณ์ UploadComplete จะเริ่มหลังจากทุกอย่างในคิวเสร็จสิ้นการอัปโหลด หากคุณต้องการเริ่มการดำเนินการล้างข้อมูลทั่วไปหลังจากการดาวน์โหลดทั้งหมดเสร็จสิ้นนี่คือสิ่งที่คุณต้องการผูกไว้

ตัวอย่างเช่น WordPress ผูกดังต่อไปนี้:

uploader.bind('UploadComplete', function(up, files) {
    uploadComplete();
});

uploadCompleteฟังก์ชั่นที่นี่เพียงแค่ช่วยให้ปุ่ม "แทรกแกลเลอรี่" ในหน้า

น่าเสียดาย ...

... ดูเหมือนจะไม่มีทางที่เราจะผูกมัดกับเหตุการณ์เหล่านี้ uploaderวัตถุที่มีอยู่ภายในปิดในส่วนhandlers.jsไฟล์และ Plupload ตัวเองไม่ได้มีวิธีการอ้างอิงกรณีที่มีอยู่ คุณไม่สามารถใช้ตัวเลือก jQuery แบบง่าย ๆ เพื่อดมกลิ่นและเพิ่มเหตุการณ์ที่กำหนดเอง ... ดังนั้นเราจึงไม่มีโชค

ในอีกด้านหนึ่งคุณสามารถใช้เหตุการณ์ที่กำหนดเองเหล่านี้ได้ตามต้องการในระบบของคุณเอง เพียงหมุนhandlers.jsไฟล์เวอร์ชันของคุณเองด้วยกิจกรรมของคุณเองและคุณสามารถทำอะไรก็ได้ที่คุณต้องการ แต่สำหรับผู้อัปโหลดที่มีอยู่คุณติดอยู่กับ API ที่มีอยู่

โปรดทราบว่า Pluploader ใหม่เรียกใช้วิธีการเดียวกันในเวลาเดียวกันกับโปรแกรมอัปโหลด Flash ตัวเก่า ดังนั้นการคาดเดาที่ดีที่สุดของฉันคือการแฮ็กหรือการรวมระบบใด ๆ ที่คุณมีอยู่ควรทำงานต่อไป

ทดสอบสมมติฐานที่ว่า

ฉันมีปลั๊กอินที่ใช้เครื่องมืออัปโหลดที่มีอยู่เพื่ออัปโหลดไฟล์แนบและแสดง URL ในฟิลด์เมตาที่กำหนดเอง มันทำงานเหมือนกับเวทมนต์กับผู้อัปโหลดเก่าฉันเลยใช้มันใน WP 3.3 เพื่อดูว่ามันทำงานกับผู้อัปโหลดใหม่ได้หรือไม่

และมันก็เป็นเช่นนั้น!

ดังนั้นหากคุณกำลังแล้วการบูรณาการกับผู้อัปโหลดสื่อระบบของคุณควรจะยังคงทำงานร่วมกับระบบใหม่โดยไม่มีการเปลี่ยนแปลงใด ๆ


22

(นี่เป็นเพียงตัวอย่างการปฏิบัติตามคำตอบของ EAMann)

// include js
add_action('admin_enqueue_scripts', function($page){

  // check if this your page here with the upload form!
  if(($page !== 'post.php') || (get_post_type() !== 'post'))
    return;

  wp_enqueue_script('plupload-all');
});



// this adds a simple metabox with the upload form on the edit-post page
add_action('add_meta_boxes', function(){
  add_meta_box('gallery_photos', __('Photos'), 'upload_meta_box', 'post', 'normal', 'high');

});                                               



// so here's the actual uploader
// most of the code comes from media.php and handlers.js
function upload_meta_box(){ ?>
   <div id="plupload-upload-ui" class="hide-if-no-js">
     <div id="drag-drop-area">
       <div class="drag-drop-inside">
        <p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
        <p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
        <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
      </div>
     </div>
  </div>

  <?php

  $plupload_init = array(
    'runtimes'            => 'html5,silverlight,flash,html4',
    'browse_button'       => 'plupload-browse-button',
    'container'           => 'plupload-upload-ui',
    'drop_element'        => 'drag-drop-area',
    'file_data_name'      => 'async-upload',            
    'multiple_queues'     => true,
    'max_file_size'       => wp_max_upload_size().'b',
    'url'                 => admin_url('admin-ajax.php'),
    'flash_swf_url'       => includes_url('js/plupload/plupload.flash.swf'),
    'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
    'filters'             => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
    'multipart'           => true,
    'urlstream_upload'    => true,

    // additional post data to send to our ajax hook
    'multipart_params'    => array(
      '_ajax_nonce' => wp_create_nonce('photo-upload'),
      'action'      => 'photo_gallery_upload',            // the ajax action name
    ),
  );

  // we should probably not apply this filter, plugins may expect wp's media uploader...
  $plupload_init = apply_filters('plupload_init', $plupload_init); ?>

  <script type="text/javascript">

    jQuery(document).ready(function($){

      // create the uploader and pass the config from above
      var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);

      // checks if browser supports drag and drop upload, makes some css adjustments if necessary
      uploader.bind('Init', function(up){
        var uploaddiv = $('#plupload-upload-ui');

        if(up.features.dragdrop){
          uploaddiv.addClass('drag-drop');
            $('#drag-drop-area')
              .bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
              .bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });

        }else{
          uploaddiv.removeClass('drag-drop');
          $('#drag-drop-area').unbind('.wp-uploader');
        }
      });

      uploader.init();

      // a file was added in the queue
      uploader.bind('FilesAdded', function(up, files){
        var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);

        plupload.each(files, function(file){
          if (max > hundredmb && file.size > hundredmb && up.runtime != 'html5'){
            // file size error?

          }else{

            // a file was added, you may want to update your DOM here...
            console.log(file);
          }
        });

        up.refresh();
        up.start();
      });

      // a file was uploaded 
      uploader.bind('FileUploaded', function(up, file, response) {

        // this is your ajax response, update the DOM with it or something...
        console.log(response);

      });

    });   

  </script>
  <?php
}


// handle uploaded file here
add_action('wp_ajax_photo_gallery_upload', function(){

  check_ajax_referer('photo-upload');

  // you can use WP's wp_handle_upload() function:
  $status = wp_handle_upload($_FILES['async-upload'], array('test_form'=>true, 'action' => 'photo_gallery_upload'));

  // and output the results or something...
  echo 'Uploaded to: '.$status['url'];

  exit;
});

มีเหตุการณ์ plupload เพิ่มเติมที่คุณสามารถใช้ตรวจสอบเอกสารของ ...


ฉันได้ลองใช้โค้ดนี้แล้วและก็ยังไม่ได้ทำอะไรเลย ภาพดูเหมือนจะอัปโหลด แต่ฉันไม่รู้ว่าที่ไหนและฉันไม่ได้รับคำตอบจากคอนโซล
Manny Fleurmond

1
ตกลงพบปัญหา: ด้วยเหตุผลบางอย่าง $ _FILES ['async-upload'] ที่คุณส่งไปยัง wp_handle_upload ดูเหมือนจะไม่ผ่านการตรวจสอบในฟังก์ชั่นดังกล่าว หากคุณผ่านอาร์เรย์ ('test_form' => false) เป็นอาร์กิวเมนต์ตัวที่สองใน wp_handle_upload มันจะอัปโหลดไฟล์โดยไม่มีปัญหา นอกจากนี้ยังมีวงเล็บในการเรียกไปยัง add_meta_box ฉันได้เพิ่มการแก้ไขในคำตอบของคุณซึ่งควรทำให้มันใช้งานได้
Manny Fleurmond

ในฐานะที่เป็นบันทึกการใช้งาน - สามารถตั้งค่าการดำเนินการupload-attachmentที่จะเรียกใช้wp_ajax_upload_attachment()ตัวจัดการดั้งเดิมและด้วยการปรับแต่งบางอย่างไม่จำเป็นต้องใช้ตัวจัดการการอัปโหลดที่กำหนดเองทั้งหมดเพียงแค่รูปแบบและส่วนของสคริปต์
Rarst

13

นี่คือการขยายไปสู่คำตอบของ @One Trick Pony นอกเหนือจากการอัปโหลดไฟล์ไปยังไฟล์ที่เหมาะสมแล้วจะบันทึกไฟล์ดังกล่าวเป็นไฟล์แนบด้วย:

<?php
// include js
add_action('admin_enqueue_scripts', function($page){

  // check if this your page here with the upload form!
  if(($page !== 'post.php') || (get_post_type() !== 'post'))
    return;

  wp_enqueue_script('plupload-all');
});



// this adds a simple metabox with the upload form on the edit-post page
add_action('add_meta_boxes', function(){
  add_meta_box('gallery_photos', __('Photos'), 'upload_meta_box', 'post', 'normal', 'high');

});                                               



// so here's the actual uploader
// most of the code comes from media.php and handlers.js
function upload_meta_box(){ ?>
   <div id="plupload-upload-ui" class="hide-if-no-js">
     <div id="drag-drop-area">
       <div class="drag-drop-inside">
        <p class="drag-drop-info"><?php _e('Drop files here'); ?></p>
        <p><?php _ex('or', 'Uploader: Drop files here - or - Select Files'); ?></p>
        <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e('Select Files'); ?>" class="button" /></p>
      </div>
     </div>
  </div>

  <?php

  $plupload_init = array(
    'runtimes'            => 'html5,silverlight,flash,html4',
    'browse_button'       => 'plupload-browse-button',
    'container'           => 'plupload-upload-ui',
    'drop_element'        => 'drag-drop-area',
    'file_data_name'      => 'async-upload',            
    'multiple_queues'     => true,
    'max_file_size'       => wp_max_upload_size().'b',
    'url'                 => admin_url('admin-ajax.php'),
    'flash_swf_url'       => includes_url('js/plupload/plupload.flash.swf'),
    'silverlight_xap_url' => includes_url('js/plupload/plupload.silverlight.xap'),
    'filters'             => array(array('title' => __('Allowed Files'), 'extensions' => '*')),
    'multipart'           => true,
    'urlstream_upload'    => true,

    // additional post data to send to our ajax hook
    'multipart_params'    => array(
      '_ajax_nonce' => wp_create_nonce('photo-upload'),
      'action'      => 'photo_gallery_upload',            // the ajax action name
    ),
  );

  // we should probably not apply this filter, plugins may expect wp's media uploader...
  $plupload_init = apply_filters('plupload_init', $plupload_init); ?>

  <script type="text/javascript">

    jQuery(document).ready(function($){

      // create the uploader and pass the config from above
      var uploader = new plupload.Uploader(<?php echo json_encode($plupload_init); ?>);

      // checks if browser supports drag and drop upload, makes some css adjustments if necessary
      uploader.bind('Init', function(up){
        var uploaddiv = $('#plupload-upload-ui');

        if(up.features.dragdrop){
          uploaddiv.addClass('drag-drop');
            $('#drag-drop-area')
              .bind('dragover.wp-uploader', function(){ uploaddiv.addClass('drag-over'); })
              .bind('dragleave.wp-uploader, drop.wp-uploader', function(){ uploaddiv.removeClass('drag-over'); });

        }else{
          uploaddiv.removeClass('drag-drop');
          $('#drag-drop-area').unbind('.wp-uploader');
        }
      });

      uploader.init();

      // a file was added in the queue
      uploader.bind('FilesAdded', function(up, files){
        var hundredmb = 100 * 1024 * 1024, max = parseInt(up.settings.max_file_size, 10);

        plupload.each(files, function(file){
          if (max > hundredmb && file.size > hundredmb && up.runtime != 'html5'){
            // file size error?

          }else{

            // a file was added, you may want to update your DOM here...
            console.log(file);
          }
        });

        up.refresh();
        up.start();
      });

      // a file was uploaded 
      uploader.bind('FileUploaded', function(up, file, response) {

        // this is your ajax response, update the DOM with it or something...
        console.log(response);

      });

    });   

  </script>
  <?php
}


// handle uploaded file here
add_action('wp_ajax_photo_gallery_upload', function(){

  check_ajax_referer('photo-upload');

  // you can use WP's wp_handle_upload() function:
  $file = $_FILES['async-upload'];
  $status = wp_handle_upload($file, array('test_form'=>true, 'action' => 'photo_gallery_upload'));

  // and output the results or something...
  echo 'Uploaded to: '.$status['url'];

  //Adds file as attachment to WordPress
  echo "\n Attachment ID: " .wp_insert_attachment( array(
     'post_mime_type' => $status['type'],
     'post_title' => preg_replace('/\.[^.]+$/', '', basename($file['name'])),
     'post_content' => '',
     'post_status' => 'inherit'
  ), $status['file']);

  exit;
});
?>

1
คิดว่ามีข้อผิดพลาดเล็กน้อยที่นี่ - พารามิเตอร์ล่าสุดของการเรียก wp_insert_attachment ควรเป็น $ status ['file'] แทนที่จะเป็น $ status ['url'] ค่อนข้างแน่ใจว่ามันจะต้องเป็นเส้นทางท้องถิ่น
MathSmath
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.