Sử dụng wp media 3.5 uploader

Trong phiên bản 3.5 wp đã tích hợp media uploader.

Bạn phải đăng ký và load thư viện js trong header:

 add_thickbox();
wp_enqueue_media(  );

Dưới đây là code js để sử dụng:

// Uploading files
var file_frame;

  jQuery('.upload_image_button').live('click', function( event ){

    event.preventDefault();

    // If the media frame already exists, reopen it.
    if ( file_frame ) {
      file_frame.open();
      return;
    }

    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
      title: 'title cua form',
      button: {
        text: 'button select text',
      },
      library: {
           type: 'image'//type of file
       },
      multiple: false  // Set to true to allow multiple files to be selected
    });

    // When an image is selected, run a callback.
    file_frame.on( 'select', function() {
      // We set multiple to false so only get one image from the uploader
      attachment = file_frame.state().get('selection').first().toJSON();

      // Do something with attachment.id and/or attachment.url here
    });

    // Finally, open the modal
    file_frame.open();
  });

Dưới đây là kết quả:

Screen Shot 2012-12-21 at 07.35.09

Để sử dụng multi upload file:

   // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
      title: jQuery( this ).data( 'uploader_title' ),
      button: {
        text: jQuery( this ).data( 'uploader_button_text' ),
      },
      multiple: true  // Set to true to allow multiple files to be selected
    });

Rồi bạn cần đặt code sau để xử lý:

 // When an image is selected, run a callback.
  file_frame.on( 'select', function() {

    var selection = file_frame.state().get('selection');

    selection.map( function( attachment ) {

      attachment = attachment.toJSON();

      // Do something with attachment.id and/or attachment.url here
    });
  });
Comments are closed.