Blueimp jquery fileupload-上传的文件会覆盖上载文件夹中的先前文件

时间：2019-06-05 20:04:25

标签： javascript jquery jquery-file-upload blueimp

我有一个解决方案，似乎对于单个文件上传来说效果很好。我使用的脚本具有codeigniter引导程序模式视图，然后通过UploadHandler.php库管理上传。

为冗长的代码表示歉意，但我根本看不到为什么我在多个uload中遇到这个问题。

脚本如下：

// file_upload.js
var current_rot = 0;
var rotindex = [0,8,3,6];
var rotations = ['rotate(0deg)','','','rotate(180deg)','','','rotate(270deg)','','rotate(90deg)'];
var myImage = new Object();
var myCount = new Object();
var image_type;
var btn_pressed;

function rotit()
{
    var ctx = $('#files').find('canvas');
    if(ctx[0].clientWidth > ctx[0].clientHeight) {
        $('#files').height(ctx[0].clientWidth);
        var shift = ((ctx[0].clientWidth - ctx[0].clientHeight) / 2) + 'px';
        $('#files > canvas').css({"transform": 'translateY('+shift+') '+rotations[current_rot]});
    } else {
        $('#files > canvas').css({"transform": rotations[current_rot]});
    }
    $('#choose_upload').modal('handleUpdate');
}

$(function(){

    $('#post_image_choice').hide();

    // these actions are for choose ikulpic view
    if($('#thenextstep').length) {
        $('#thenextstep').hide();
    }
    $('#choose_upload').on('hidden.bs.modal',function(){
        if($('#thenextstep').length) {
            $('#thenextstep').show();
        }

    });

    $('#chooseimagebackground').on('click', function() {
        $('#fileupload').trigger('click');
    });

    $('.btn-upload').on('click', function() {
        btn_pressed = $(this);
        image_type = btn_pressed.attr('data-images');
        myImage[image_type] = Object.is(myImage[image_type], undefined) ? [] : myImage[image_type];
        myCount[image_type+'_upcount'] = Object.is(myCount[image_type+'_upcount'], undefined) ? 0 : myCount[image_type+'_upcount'];
        myCount[image_type+'_upallow'] = parseInt(btn_pressed.attr('data-count'));
        $('#fu_status').hide();
        $('#files').empty();
        $('#progress .progress-bar').css({'width':'0%'});
        $('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
        $('#chooseimagebackground').show();
        $('#choose_upload').modal('show');
    });


    $('#fileupload').fileupload(
    // initial options
    {
        //server-side upload handler
        url: '/api/image_upload/upload',
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(jpe?g|png)$/i,
        formData: {},
        maxFileSize: 999000,
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
        singleFileUploads: false,
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        //orient_image: true,
        //auto_orient: false,
        previewOrientation: current_rot,
        imageOrientation: current_rot,
        previewMaxWidth: 300,
        previewMaxHeight: 300,
        previewCrop: false

    }).on('fileuploadadd', function (e, data)  // Add
    {
        $('#chooseimagebackground').hide();
        // show the rotate and upload buttons
        $('#post_image_choice').show();
        $('#uploadButton').data(data);

    }).on('fileuploadprocessalways', function (e, data)  // Progress Always
    {
        var index = data.index,
            file = data.files[index];
        if (file.preview)
        {
            $('#files').append(file.preview);
        }
        if (file.error)
        {
            $('#files').append($('<span class="text-danger"/>').text(file.error));
        }

    }).on('fileuploadprogressall', function (e, data)  // Progress All
    {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );

    }).on('fileuploaddone', function (e, data)        // DONE
    {
        $.each(data.result.files, function (index, file)
        {
            if (file.url)
            {
                myCount[image_type+'_upcount']++;
                var html = '<p class="text-success bigger">Uploaded('+myCount[image_type+'_upcount'].toString()+') <span class="glyphicon glyphicon-ok"></span></p>';
                if(myCount[image_type+'_upcount'] < myCount[image_type+'_upallow']) {
                    html += '<button type="button" id="nextButton" class="btn btn-info">Next</button>';
                } else {
                    btn_pressed.prop('disabled',true);
                }
                $('#fu_status').html(html).show();
                $('#'+image_type+'_uc').val(myCount[image_type+'_upcount']);
                var tmp = {};
                tmp.url = file.url;
                tmp.exif_rot = current_rot;
                myImage[image_type].push(tmp);
                $('#filedata').val( JSON.stringify(myImage) );
            }
            else if (file.error)
            {
                var error = $('<p class="text-danger bigger"/>').text(file.error);
                $('#files')
                .append(error)
                .append('<button id="cancelButton1" type="button" class="btn btn-info">Reset</button>');
            }
        }); // end of each

    }).on('fileuploadfail', function (e, data)        // Fail
    {
        $.each(data.files, function (index)
        {
            var error = $('<span class="text-danger bigger"/>').text('File upload failed.');
            $('#files').append(error);
        });

    }).prop('disabled', !$.support.fileInput)          // Disabled
      .parent()
      .addClass($.support.fileInput ? undefined : 'disabled');


    $('#cancelButton, #cancelButton1').on('click', function(){
        $('#post_image_choice').hide();
        $('#files').empty().css('height','auto');
        $('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
        $('#chooseimagebackground').show();
        current_rot = 0;
    });

    $(document).on('click', '#nextButton', function(){
        $('#post_image_choice').hide();
        $('#fu_status').hide();
        $('#files').empty().css('height','auto');
        $('#uploadButton').off('click').text('Upload'); // remove abort event handler and change text
        $('#progress .progress-bar').css({'width':'0%'});
        $('#chooseimagebackground').show();
        current_rot = 0;
    });

    $(document).on('click', '#uploadButton', function(){
        var ul_btn = $(this),
            data = ul_btn.data();

        ul_btn
            .off('click')
            .text('Abort')
            .on('click', function () {
               data.abort();
            });

        data.submit().always(function(){
            $('#post_image_choice').hide();
        });
    });

    $('#rotanti').on('click', function(){
        var t = rotindex.indexOf( current_rot )-1;
        if(t == -1) t = 3;
        current_rot = rotindex[t];
        rotit();
    });

    $('#rotclock').on('click', function(){
        var t = rotindex.indexOf( current_rot )+1;
        if(t == rotindex.length) t = 0;
        current_rot = rotindex[t];
        rotit();
    });

});

，模态视图如下：

<link rel="stylesheet" href="<?= JQ_FU_CSS_URL ?>" integrity="<?= JQ_FU_CSS_HASH ?>" crossorigin="anonymous" />
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="<?= LIA_JS_URL ?>" integrity="<?= LIA_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<?= C2B_JS_URL ?>" integrity="<?= C2B_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="<?= JQ_UI_JS_URL ?>" integrity="<?= JQ_UI_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?= JQ_IT_JS_URL ?>" integrity="<?= JQ_IT_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The basic File Upload plugin -->
<script src="<?= JQ_FU_JS_URL ?>" integrity="<?= JQ_FU_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The File Upload processing plugin -->
<script src="<?= JQ_FUP_JS_URL ?>" integrity="<?= JQ_FUP_JS_HASH ?>" crossorigin="anonymous"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="<?= JQ_FUI_JS_URL ?>" integrity="<?= JQ_FUI_JS_HASH ?>" crossorigin="anonymous"></script>
<!--  upload file modal -->
<div class="modal fade" id="choose_upload" style="overflow-y:hidden" tabindex="-1" role="dialog" aria-labelledby="ModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="ikulpic-interact-modal-title">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <div class="col-md-2">
                    <img src="/res/pngs/ikulpic-modal/ikulpic-logo-modal.png" alt="ikulpic" height="35" width="85">
                </div>
                <div class="col-md-9">
                    <p class="fu-header">File Upload <small style="font-size:60%">Click below to choose the file you want to upload</small></p>
                </div>
            </div>
            <div class="modal-body">
                <div id="content_area" class="cko-ikulpic-image" style="width:300px">
                    <div id="chooseimagebackground" style="background-image:url(/res/pngs/checkout-steps/choose-your-image-icon.png); background-size: 100%; height:200px; background-repeat:no-repeat;background-position:center" title="Max file size: 100MB&#10;File types: .png,.jpeg,.jpg"></div>
                    <div id="files" class="files" style="text-align:center; vertical-align:middle;height:auto;"></div>
                    <div id="fu_status" style="display:none;text-align:center"></div>
                    <input id="fileupload" type="file" name="files[]" style="display:none"/>
                </div>
                <div id="post_image_choice">
                    <div class="row row-centered">
                        <div id="progress" class="progress text-center" style="margin: 10px 100px;height: 10px">
                            <div class="progress-bar progress-bar-success"></div>
                        </div>
                        <div id="btn-group" class="btn-group" role="group" aria-label="Upload button group">
                            <button type="button" id="cancelButton" class="btn btn-danger">Cancel</button>
                            <button type="button" id="rotanti" class="btn btn-info">Rotate Left</button>
                            <button type="button" id="rotclock" class="btn btn-info">Rotate Right</button>
                            <button type="button" id="uploadButton" class="btn btn-warning">Upload</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end upload file modal -->

和UploadHandler库使用的选项如下：

Array
(
    [upload_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
    [upload_url] => https://dev.ikulpic.com/images/uploads/h8HUV2EbhhHd/
    [image_versions] => Array
        (
            [] => Array
                (
                    [upload_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
                    [urlfolder] => https://dev.ikulpic.com/images/uploads/h8HUV2EbhhHd/
                    [saveto_dir] => /var/www/html/ikdev/images/uploads/h8HUV2EbhhHd/
                    [do_rotate] =>
                    [new_rotate_dir] =>
                    [auto_orient] =>
                )

        )

    [script_url] => https://dev.ikulpic.com/index.php
    [input_stream] => php://input
    [user_dirs] =>
    [mkdir_mode] => 493
    [param_name] => files
    [delete_type] => DELETE
    [access_control_allow_origin] => *
    [access_control_allow_credentials] =>
    [access_control_allow_methods] => Array
        (
            [0] => OPTIONS
            [1] => HEAD
            [2] => GET
            [3] => POST
            [4] => PUT
            [5] => PATCH
            [6] => DELETE
        )

    [access_control_allow_headers] => Array
        (
            [0] => Content-Type
            [1] => Content-Range
            [2] => Content-Disposition
        )

    [redirect_allow_target] => /^https\:\/\/dev\.ikulpic\.com\//
    [download_via_php] =>
    [readfile_chunk_size] => 10485760
    [inline_file_types] => /\.(gif|jpe?g|png)$/i
    [accept_file_types] => /\.(jpe?g|png)$/i
    [max_file_size] =>
    [min_file_size] => 1
    [max_number_of_files] => 6
    [image_file_types] => /\.(gif|jpe?g|png)$/i
    [correct_image_extensions] =>
    [max_width] =>
    [max_height] =>
    [min_width] => 1
    [min_height] => 1
    [discard_aborted_uploads] => 1
    [image_library] => 1
    [convert_bin] => convert
    [identify_bin] => identify
    [print_response] => 1
)

我已经看过lib内部的内容，但是看不到任何明显的迹象表明我的文件被覆盖的原因。好像上传仍在等待完成，因此被删除了吗？另外，如果您继续回收实例，我只是不了解脚本的工作原理。我是否需要调用一个新实例，如果需要，该怎么做？

感谢所有帮助，保罗，

0 个答案:

没有答案
相关问题
最新问题