File upload script binnen WordPress
Ik gebruik dit script binnen WordPress om de ingebouwde WordPress bestandsupload modal aan te roepen.
Ik heb een input veld met ID #input_background en druk op button met ID #button_background en de modal opent.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
jQuery(document).ready(function($){
var mediaUploader;
$('#button_background').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#input_background').val(attachment.url);
});
mediaUploader.open();
});
});
var mediaUploader;
$('#button_background').click(function(e) {
e.preventDefault();
if (mediaUploader) {
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame = wp.media({
title: 'Choose Image',
button: {
text: 'Choose Image'
}, multiple: false });
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$('#input_background').val(attachment.url);
});
mediaUploader.open();
});
});
Maar ik heb meer dan 1 veld. Ik kan bovenstaande herhalen voor ieder veld/button, maar het is natuurlijk veel netter om dit in één keer goed te doen. Wie kan me hiermee helpen?
Guido
Toevoeging op 02/09/2018 20:29:59:
Zoekend op het web een oplossing gevonden.
Iedere button en ieder invoerveld heeft nu dezelfde CSS class gekregen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
jQuery(document).ready(function($){
$('.button').click(function(e) {
e.preventDefault();
var btnClicked = $( this );
var custom_uploader = wp.media({
title: 'Choose Image',
button: {text: 'Choose Image'},
multiple: false
})
.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$( btnClicked ).parent().children( '.input' ).val( attachment.url );
})
.open();
});
});
$('.button').click(function(e) {
e.preventDefault();
var btnClicked = $( this );
var custom_uploader = wp.media({
title: 'Choose Image',
button: {text: 'Choose Image'},
multiple: false
})
.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$( btnClicked ).parent().children( '.input' ).val( attachment.url );
})
.open();
});
});
Schijnbaar koppelt dit script de button (.button) aan de input (.input) die erbij hoort.
Ik snap de werking dus nog niet echt, dus als iemand dat mij kan en wil uitleggen?
Guido
Gewijzigd op 02/09/2018 21:27:29 door Guido -
Er zijn nog geen reacties op dit bericht.