I want to use multiple instances of plupload on single form. I saw the following link. But i dnt know how to implement that in wordpress.
So I can upload images from first upload link, then documents from second upload link etc..
This is my html code
<a id="aaiu-uploader" class="aaiu_button" href="#"><?php _e('*Select Images
(mandatory)','wpestate');?></a>
<input type="hidden" name="attachid" id="attachid" value="<?php
echo $attachid;?>">
<input type="hidden" name="attachthumb" id="attachthumb" value="<?
php echo $thumbid;?>">
This is my js code
jQuery(document).ready(function($) {
"use strict";
if (typeof(plupload) !== 'undefined') {
var uploader = new plupload.Uploader(ajax_vars.plupload);
uploader.init();
uploader.bind('FilesAdded', function (up, files) {
$.each(files, function (i, file) {
// console.log('append'+file.id );
$('#aaiu-upload-imagelist').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>'
+
'</div>');
});
up.refresh(); // Reposition Flash/Silverlight
uploader.start();
});
uploader.bind('UploadProgress', function (up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
// On erro occur
uploader.bind('Error', function (up, err) {
$('#aaiu-upload-imagelist').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up.refresh(); // Reposition Flash/Silverlight
});
uploader.bind('FileUploaded', function (up, file, response) {
var result = $.parseJSON(response.response);
// console.log(result);
$('#' + file.id).remove();
if (result.success) {
$('#profile-image').css('background-image','url("'+result.html+'")');
$('#profile-image').attr('data-profileurl',result.html);
$('#profile-image_id').val(result.attach);
var all_id=$('#attachid').val();
all_id=all_id+","+result.attach;
$('#attachid').val(all_id);
$('#imagelist').append('<div class="uploaded_images" data-
imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa
deleter fa-trash-o"></i> </div>');
delete_binder();
thumb_setter();
}
});
$('#aaiu-uploader').click(function (e) {
uploader.start();
e.preventDefault();
});
$('#aaiu-uploader2').click(function (e) {
uploader.start();
e.preventDefault();
});
}
});
Suggest something...Anyone has done this kind of thing??
Viral Solani
Try this solution.You can have n number of instances with this.
You can init plupload like this
$(".uploader").plupload({
so create some divs with class .uploader and init it as pluploaders
try to create new instance of uploader with another name and try with uploader2 and bind with QueueChanged .
Rahul Jalavadiya
//javascript example
jQuery(document).ready(function($) {
"use strict";
if (typeof(plupload) !== 'undefined') {
var uploader1 = new plupload.Uploader({
runtimes : 'html5,flash,html4',
browse_button : 'upload-button-1',
container : 'upload-container-1',
file_data_name : 'upload_file',
max_file_size : $max_file_size . 'b', //maximum file size you want set
url : '<?php echo admin_url('admin-ajax.php') . '?action=me_upload1&nonce='. wp_create_nonce('aaiu_allow') ?>' , //here add your ajax request function url or callback method url for example i putted link
flash_swf_url :
'<?php echo includes_url('js/plupload/plupload.flash.swf') ?>', // path for plupload.flash.swf file
filters : array(array('title' => __('Allowed Files','wpestate'), 'extensions' => "jpg,gif,png")), // filters option or validation for extension type
multipart : true,
urlstream_upload : true,
});
uploader1.init();
uploader1.bind('FilesAdded', function (up, files) {
$.each(files, function (i, file) {
// console.log('append'+file.id );
$('#aaiu-upload-imagelist-1').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up.refresh(); // Reposition Flash/Silverlight
uploader1.start();
});
uploader1.bind('UploadProgress', function (up, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
// On erro occur
uploader1.bind('Error', function (up, err) {
$('#aaiu-upload-imagelist-1').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up.refresh(); // Reposition Flash/Silverlight
});
uploader1.bind('FileUploaded', function (up, file, response) {
console.log(response.response);
var result = $.parseJSON(response.response);
// console.log(result);
$('#' + file.id).remove();
if (result.success) {
var all_id=$('#uplodaer1_attachid').val();
all_id=all_id+","+result.attach;
$('#uplodaer1_attachid').val(all_id);
$('#imagelist-1').append('<div class="uploaded_images" data-imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa deleter fa-trash-o"></i> </div>');
delete_binder();
thumb_setter();
}
});
}
var uploader2 = new plupload.Uploader({
runtimes : 'html5,flash,html4',
browse_button : 'upload-button-2',
container : 'upload-container-2',
file_data_name : 'upload_file',
max_file_size : $max_file_size . 'b', //maximum file size you want set
url : '<?php echo admin_url('admin-ajax.php') . '?action=me_upload&nonce='. wp_create_nonce('aaiu_allow') ?>' , //here add your ajax request function url or callback method url for example i putted link
flash_swf_url :
'<?php echo includes_url('js/plupload/plupload.flash.swf') ?>', // path for plupload.flash.swf file
filters : array(array('title' => __('Allowed Files','wpestate'), 'extensions' => "jpg,gif,png")), // filters option or validation for extension type
multipart : true,
urlstream_upload : true,
});
uploader2.init();
uploader2.bind('FilesAdded', function (up_2, files) {
$.each(files, function (i, file) {
// console.log('append'+file.id );
$('#aaiu-upload-imagelist-2').append(
'<div id="' + file.id + '">' +
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
'</div>');
});
up_2.refresh(); // Reposition Flash/Silverlight
uploader2.start();
});
uploader2.bind('UploadProgress', function (up_2, file) {
$('#' + file.id + " b").html(file.percent + "%");
});
// On erro occur
uploader2.bind('Error', function (up_2, err) {
$('#aaiu-upload-imagelist-2').append("<div>Error: " + err.code +
", Message: " + err.message +
(err.file ? ", File: " + err.file.name : "") +
"</div>"
);
up_2.refresh(); // Reposition Flash/Silverlight
});
uploader2.bind('FileUploaded', function (up_2, file, response) {
console.log(response.response);
var result = $.parseJSON(response.response);
// console.log(result);
$('#' + file.id).remove();
if (result.success) {
var all_id=$('#uplodaer2_attachid').val();
all_id=all_id+","+result.attach;
$('#uplodaer2_attachid').val(all_id);
$('#imagelist-2').append('<div class="uploaded_images" data-imageid="'+result.attach+'"><img src="'+result.html+'" alt="thumb" /><i class="fa deleter fa-trash-o"></i> </div>');
delete_binder();
thumb_setter();
}
});
$('#aaiu-uploader-1').click(function (e) {
// uploader2.destroy();
uploader.start();
e.preventDefault();
});
$('#aaiu-uploader-2').click(function (e) {
uploader_upc.start();
e.preventDefault();
});
});
</script>// html code
<div id="upload-container">
<div id="upload-container-1">
<div id="aaiu-upload-imagelist-1">
<ul id="aaiu-ul-list-1" class="aaiu-upload-list">
</ul>
</div>
<div id="imagelist-1" class="" data-source="<?php echo $edit_id; ?>"> </div>
<a id="upload-button-1" class="aaiu_button" href="#">Click here to add photographs</a>
<input type="hidden" name="uploader1_attachid" id="uplodaer1_attachid" >
<input type="hidden" name="uploader1_attachthumb" id="uploader1_attachthumb" >
</div>
</div>
<div id="upload-container">
<div id="upload-container-2">
<div id="aaiu-upload-imagelist-2">
<ul id="aaiu-ul-list-2" class="aaiu-upload-list">
</ul>
</div>
<div id="imagelist-2" class="" data-source="<?php echo $edit_id; ?>"> </div>
<a id="upload-button-2" class="aaiu_button" href="#">Click here to add photographs</a>
<input type="hidden" name="uploader2_attachid" id="uploader2_attachid" >
<input type="hidden" name="uplaoder2_attachthumb" id="uplaoder2_attachthumb" >
</div>
</div>
</body>
<script>I also looked for that script but didn't get any best solution , after that I made this code.
来源：https://stackoverflow.com/questions/25440360/how-to-use-multiple-instances-of-plupload-on-single-form