0

该插件应该有一个内置的唯一名称更改器,但似乎不起作用。不确定问题是什么。

<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,但文件名保持不变。有什么办法让我自己独一无二?

4

1 回答 1

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
            });
于 2013-02-20T04:24:23.783 回答