WordPress theme or plug-in application development often requires uploading function of media files such as pictures, videos, documents, etc. If developers write media upload components independently, they need to spend a lot of time and effort. However, by calling the media library components provided with WordPress, they can achieve twice the result with half the effort. Only simple js code can be written to have a powerful media upload function.
Wp.media code parameters
one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen | var mediaObj = wp. media ( { frame : 'select' , //Select which media type to call the media library, select post、image、audio、video， Select select to only allow uploading new media or select uploaded media. Other types can be tested by yourself. Select post for the complete option title : 'Upload pictures' , //Window Title multiple : false , //Multiple choice, true or false
//Query parameters library : { order : 'DESC' , //Sort Reverse orderby : 'date' , //Sort condition, name author、date、title、modified、uploadedTo、id、post__in、menuOrder type : 'image' , // mime type. e.g. 'image', 'image/jpeg' search : null , //Title of search attachment uploadedTo : null //Including media uploaded only to the specified article ID, wp.media.view.settings.post.id (for the current post ID)
} , button : { text : 'Done' //Button text, such as insert, confirm, etc
}
} ) ; |
1. Trigger wp.media to use open() method:
2. Process uploaded or selected media
Called in the select event of an object get() event:
one two three four | mediaObj. on ( 'select' , function ( ) {
//Processing code
var selectImg = mediaObj. state ( ) . get ( 'selection' ) ; //Important, get the selected media information
} ) ; |
3. Preselected picture
When the media library is opened, the picture with the specified ID is selected by default and processed in the open event of the object
one two three four five six seven eight | mediaObj. on ( 'open' , function ( ) {
var defaultPostID = [ one , two , three ] ; //Default Attachment ID
var selectImg = mediaObj. state ( ) . get ( 'selection' ) ; //Get the data of the selected picture defaultPostID. forEach ( function ( imgID ) { //Edit Default Attachment ID
var getAttachment = wp. media . attachment ( imgID ) ; //Get according to ID selectionAPI. add ( getAttachment ? [ getAttachment ] : [ ] ) ;
} ) ;
} ) ; |
event:
- Ready – Triggered when DOM loading is completed
- Attach – Triggered when the $el of the upload component is appended to the DOM
- Open – Triggered when the media window is opened
- Escape – Triggered when a component is closed through an escape key
- Close – Triggered when closed
- Select – Triggered when a media file is selected
- Activate – Triggered when the status is activated
- {region}: deactivate – Fires when mode is disabled on a region
- {region}: deactivate: {mode} – and more specific events including this mode.
- {region}: create (region creation
- {region}: create: {mode} – and more specific events including this mode
- {region}: render – Fires when the region is ready to render its view.
- {region}: render: {mode} – and more specific events including this mode.
- {region}: activate – Fires when a new mode is activated on a region (after rendering).
- {region}: activate: {mode} – and more specific events including this mode.
method:
- mediaObj.state(); Gets an object representing the current state.
- mediaObj.lastState(); Gets an object that represents the previous state.
- mediaObj.open(); Open the uploader.
Example:
HTML:
one two three four five | <div class = "avatar" >
<img src = "" alt = "" />
<input type = "text" id = "img" value = "" />
<button class = "upload" > Upload avatar </button >
</div > |
JS code:
one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen twenty twenty-one twenty-two twenty-three twenty-four twenty-five twenty-six twenty-seven twenty-eight twenty-nine thirty thirty-one thirty-two thirty-three thirty-four | jQuery ( document ) . ready ( function ( $ ) {
var upload_avatar ; $ ( 'body' ) . on ( 'click' , '.upload' , function ( event ) { event. preventDefault ( ) ;
var boke8_net_box = $ ( this ) . parents ( '.avatar' ) ; if ( upload_avatar ) { upload_avatar. on ( 'select' , function ( ) {
var attachment = upload_avatar. state ( ) . get ( 'selection' ) . first ( ) . toJSON ( ) ; boke8_net_box. find ( '#img' ) . val ( attachment. url ) . trigger ( 'change' ) ; boke8_net_box. find ( 'img' ) . attr ( 'src' , attachment. url ) ; boke8_net_box. find ( '.upload' ) . text ( 'Modify avatar' ) ;
} ) ; upload_avatar. open ( ) ;
return ;
} upload_avatar = wp. media ( { title : 'Set avatar' , button : { text : 'Insert'
} , multiple : false
} ) ; upload_avatar. on ( 'select' , function ( ) {
var attachment = upload_avatar. state ( ) . get ( 'selection' ) . first ( ) . toJSON ( ) ; boke8_net_box. find ( '#img' ) . val ( attachment. url ) . trigger ( 'change' ) ; boke8_net_box. find ( 'img' ) . attr ( 'src' , attachment. url ) ; boke8_net_box. find ( '.upload' ) . text ( 'Modify avatar' ) ;
} ) ; upload_avatar. open ( ) ;
} ) ;
} ) ; |
The remaining data is saved with PHP code.
