该插件假设有一个内置的唯一名称更改器，但似乎不起作用。不确定问题是什么。
<div class="upload-form" id="uploader">
<!-- Form Heading -->
<h1 class="replace-text">Upload Form</h1>
<a href="#" class="close" title="Close Window"><img src="img/close-button.png" alt="Close"></a>
<!-- Select & Upload Button -->
<div>
<a class="button" id="pickfiles" href="#">Select</a>
<a class="button" id="uploadfiles" href="#">Upload</a>
</div>
<!-- File List -->
<div id="filelist" class="cb"></div>
<!-- Progress Bar -->
<div id="progressbar"></div>
<!-- Close After Upload -->
<div id="closeAfter">
<span class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox">
<label for="checkbox">Close window after upload</label>
</span>
</div>
</div><!-- close uploader -->
这是我的迷你文件上传器，下面是处理S3存储桶信息的脚本。
<script>
// Upload Form
$(function() {
// Settings ////////////////////////////////////////////////
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight', // Set runtimes, here it will use HTML5, if not supported will use flash, etc.
unique_names: true,
browse_button : 'pickfiles', // The id on the select files button
multi_selection: true, // Allow to select one file each time
container : 'uploader', // The id of the upload form container
max_file_size : '800kb', // Maximum file size allowed
url : 'http://<?php echo $bucket; ?>.s3.amazonaws.com/',
multipart: true,
multipart_params: {
'key': '<?=$slug?>/${filename}', // use filename as a key
'Filename': '${filename}', // adding this to keep consistency across the runtimes
'acl': 'public-read',
'Content-Type': 'image/jpeg',
'success_action_status': '201',
'AWSAccessKeyId' : '<?php echo $accessKeyId; ?>',
'policy': '<?php echo $policy; ?>',
'signature': '<?php echo $signature; ?>'
},
flash_swf_url : '<?php echo get_stylesheet_directory_uri(); ?>/js/plupload.flash.swf', // The url to thye flash file
silverlight_xap_url : '<?php echo get_stylesheet_directory_uri(); ?>/js/plupload.silverlight.xap', // The url to the silverlight file
filters : [ {title : "Image files", extensions : "jpg,gif,png"} ] // Filter the files that will be showed on the select files window
});
// RUNTIME
uploader.bind('Init', function(up, params) {
$('#runtime').text(params.runtime);
});
// Start Upload ////////////////////////////////////////////
// When the button with the id "#uploadfiles" is clicked the upload will start
$('#uploadfiles').click(function(e) {
uploader.start();
e.preventDefault();
});
uploader.init(); // Initializes the Uploader instance and adds internal event listeners.
// Selected Files //////////////////////////////////////////
// When the user select a file it wiil append one div with the class "addedFile" and a unique id to the "#filelist" div.
// This appended div will contain the file name and a remove button
uploader.bind('FilesAdded', function(up, files) {
$.each(files, function(i, file) {
$('#filelist').append('<div class="addedFile" id="' + file.id + '">' + file.name + '<a href="#" id="' + file.id + '" class="removeFile"></a>' + '</div>');
});
up.refresh(); // Reposition Flash/Silverlight
});
// Error Alert /////////////////////////////////////////////
// If an error occurs an alert window will popup with the error code and error message.
// Ex: when a user adds a file with now allowed extension
uploader.bind('Error', function(up, err) {
alert("Error: " + err.code + ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") + "");
up.refresh(); // Reposition Flash/Silverlight
});
// Remove file button //////////////////////////////////////
// On click remove the file from the queue
$('a.removeFile').live('click', function(e) {
uploader.removeFile(uploader.getFile(this.id));
$('#'+this.id).remove();
e.preventDefault();
});
// Progress bar ////////////////////////////////////////////
// Add the progress bar when the upload starts
// Append the tooltip with the current percentage
uploader.bind('UploadProgress', function(up, file) {
var progressBarValue = up.total.percent;
$('#progressbar').fadeIn().progressbar({
value: progressBarValue
});
$('#progressbar .ui-progressbar-value').html('<span class="progressTooltip">' + up.total.percent + '%</span>');
});
// Close window after upload ///////////////////////////////
// If checkbox is checked when the upload is complete it will close the window
uploader.bind('UploadComplete', function() {
if ($('.upload-form #checkbox').attr('checked')) {
$('.upload-form').fadeOut('slow');
}
});
// Close window ////////////////////////////////////////////
// When the close button is clicked close the window
$('.upload-form .close').on('click', function(e) {
$('.upload-form').fadeOut('slow');
e.preventDefault();
});
}); // end of the upload form configuration
// Check Box Styling
$(document).ready(function() {
var checkbox = $('.upload-form span.checkbox');
// Check if JavaScript is enabled
$('body').addClass('js');
// Make the checkbox checked on load
checkbox.addClass('checked').children('input').attr('checked', true);
// Click function
checkbox.on('click', function() {
if ($(this).children('input').attr('checked')) {
$(this).children('input').attr('checked', false);
$(this).removeClass('checked');
}
else {
$(this).children('input').attr('checked', true);
$(this).addClass('checked');
}
});
});
</script>
如您所见，我确实将唯一名称设置为true，但文件名保持不变。有什么方法可以让它们独一无二吗？
答案 0 :(得分：1)
使用此http://phpjs.org/functions/uniqid/根据页面slugs创建新ID。
$(function() {
var filen = uniqid('<?=$slug?>', true);
// Settings ////////////////////////////////////////////////
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight', // Set runtimes, here it will use HTML5, if not supported will use flash, etc.
browse_button : 'pickfiles', // The id on the select files button
multi_selection: true, // Allow to select one file each time
container : 'uploader', // The id of the upload form container
max_file_size : '800kb', // Maximum file size allowed
url : 'http://<?php echo $bucket; ?>.s3.amazonaws.com/',
multipart: true,
multipart_params: {
'key': '<?=$slug?>/'+ filen +'${filename}', // use filename as a key
'Filename': filen+'${filename}', // adding this to keep consistency across the runtimes
'acl': 'public-read',
'Content-Type': 'image/jpeg',
'success_action_status': '201',
'AWSAccessKeyId' : '<?php echo $accessKeyId; ?>',
'policy': '<?php echo $policy; ?>',
'signature': '<?php echo $signature; ?>'
},
flash_swf_url : '<?php echo get_stylesheet_directory_uri(); ?>/js/plupload.flash.swf', // The url to thye flash file
silverlight_xap_url : '<?php echo get_stylesheet_directory_uri(); ?>/js/plupload.silverlight.xap', // The url to the silverlight file
filters : [ {title : "Image files", extensions : "jpg,gif,png"} ] // Filter the files that will be showed on the select files window
});