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:

[code] add_thickbox();
wp_enqueue_media(  );[/code]

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

[code]
// 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();
});
[/code]

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

Để sử dụng multi upload file:

[code]
// 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
});
[/code]

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

[code]
// 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
});
});
[/code]