我想在单个表单上使用plupload的多个实例。我看到以下链接。但我不知道如何在wordpress中实现它。
所以我可以从第一个上传链接上传图片，然后从第二个上传链接上传文件等。
这是我的HTML代码
<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;?>">
这是我的js代码
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();
});
}
});
建议一些事情......任何人都做过这种事情吗？
答案 0 :(得分：1)
试试这个解决方案。你可以拥有n个实例。
答案 1 :(得分：0)
你可以像这样初始化plupload
$(".uploader").plupload({
所以用类.uploader创建一些div并将其初始化为pluploaders
答案 2 :(得分：0)
尝试使用其他名称创建上传者的新实例，并尝试使用uploader2并与QueueChanged绑定。
答案 3 :(得分：0)
//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>
我也找了那个剧本 但是我没有得到任何最佳解决方案，之后我制作了这段代码。
答案 4 :(得分：0)
您可能要使用多个DOM ID来开始上传：
browse_button: ['btn-upload-start', 'area-upload-start'],
完整的配置示例：
new plupload.Uploader({
// multiple upload launcher DOM IDs
browse_button: ['btn-upload-start', 'area-upload-start'],
// or a single upload launcher button
//browse_button: 'btn-upload-start',
// ID of drag-n-drop area
drop_element: 'area-drop',
// server URL for processing uploaded file
url: '/gallery/upload-image.php',
// some fancy options - files size, file types, ..
max_file_size : 1024*1024,
filters : {
mime_types : [{
title : "Image files",
extensions : "jpg,jpeg,png,gif" // remove white spaces
}]
},
// additional POST params
multipart_params: {
'param1' : 'value1',
'param2' : 'value2'
},
// setup JS handlers
init : {
FilesAdded : function(up, files){
// invoked on upload start - files are now being sent to server
// sample - add BS4 spinner to upload button
$("#btn-upload-start").append('<div id="up-spinner" class="spinner-border spinner-border-sm float-right" role="status"></div>');
up.start(); // autostart upload
},
FileUploaded : function(upldr, file, object){
// process server response - files should be now uploaded on server
$("#up-spinner").remove();
var response = $.parseJSON(object.response);
if(response.errorMsg){
alert(response.errorMsg);
}else if(response.url){
// e.g. update image thumb
$("#some-image-container").css({
backgroundImage : 'url('+response.url+')'
}).hide().fadeIn();
}
},
Error : function(up, error){
$("#up-spinner").remove();
alert(error.message != undefined ? error.message : 'Connection error!');
}
}
}).init();
请参见documentation。
答案 5 :(得分：0)
尝试一下
// html
<div data-upload-zone="plate1_1">
<button type="button" class="file-upload-button" data-file-upload="img_url"><span class="glyphicon glyphicon-file"></span>點選此上傳檔案</button>
<a href="javascript:;" data-action="uploadfiles">[Upload files]</a>
<p class="file-tips">
支援類型：<span class="file-tips-mime-types red">{{檔案副檔名}}</span><br>
檔案上傳上限：<span class="file-tips-max-file-size">{{檔案大小}}</span>
</p>
<hr>
上傳清單：<br>
<span class="filelist">filelist</span>
</div>
<br />
上傳2
<div data-upload-zone="plate1_2">
<button type="button" class="file-upload-button" data-file-upload="img_url"><span class="glyphicon glyphicon-file"></span>點選此上傳檔案</button>
<a href="javascript:;" data-action="uploadfiles">[Upload files]</a>
<p class="file-tips">
支援類型：<span class="file-tips-mime-types red">{{檔案副檔名}}</span><br>
檔案上傳上限：<span class="file-tips-max-file-size">{{檔案大小}}</span>
</p>
<hr>
上傳清單：<br>
<span class="filelist">filelist</span>
</div>
JS + jQuery
$('[data-file-upload]').on( "init", function() {
var $domEle = $(this);
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : $domEle.get(0), // here
container: $domEle.parent().get(0),
...
});
});