[英]How I can use WordPress Media Uploader with Multiple image upload Button
我是 jQuery 的初学者,使用 WordPress Media Uploader 实现多图像上传按钮无法正常工作,我需要知道如何以正确的方式进行操作。
这是我的代码:Javascript/jQuery 用于显示媒体上传器和处理选定的图像:
jQuery(document).ready( function($){
var mediaUploader;
$('#upload-button').on('click',function(e) {
e.preventDefault();
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame =wp.media({
title: 'Choose a Hotel Picture',
button: {
text: 'Choose Picture'
},
multiple:false
});
mediaUploader.on('select', function(){
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#profile-picture').val(attachment.url);
$('#profile-picture-preview').css('background-image','url(' + attachment.url + ')');
});
mediaUploader.open();
}); });
<input type="button" id="upload-button1" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture.'">
<input type="button" id="upload-button2" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture.'">
一如既往,非常感谢任何帮助。
您只需将选择器的 ID 更改为 Classes,即可使媒体上传器可用于不同的按钮。
然后,您需要创建一个标识符,以便使用正确的输入字段来设置图像。 就我而言,我使用了数据属性。
jQuery(document).ready( function($){
var mediaUploader;
$('.upload-button').on('click',function(e) {
e.preventDefault();
var buttonID = $(this).data('group');
if( mediaUploader ){
mediaUploader.open();
return;
}
mediaUploader = wp.media.frames.file_frame =wp.media({
title: 'Choose a Hotel Picture',
button: {
text: 'Choose Picture'
},
multiple:false
});
mediaUploader.on('select', function(){
attachment = mediaUploader.state().get('selection').first().toJSON();
$('#profile-picture'+buttonID).val(attachment.url);
$('#profile-picture-preview'+buttonID).css('background-image','url(' + attachment.url + ')');
});
mediaUploader.open();
}); });
<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="1">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture1.'">
<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="2">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture2.'">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.