javascript - 我只想使用 Blueimp File Uploader 上传单个文件

Question

我正在使用 Blueimp 文件上传，并且我只想上传单个文件。当我上传一个文件后第二次单击“选择文件”时，第二个文件会追加到下面。我想要的是在第二次选择新文件时替换旧文件。其代码如下:

Form

<form id="import_form">
<div class="row">
    <div class="col-md-12">                                                                        
        <div class="row upload_text" id="category_import" style="background: #eee; padding: 10px 0;">
            <div class="col-md-12">
                <a href="javascript:void(0)" id="attach_file" class="pull-left" style="padding-top:8px;"><span style="color: #888;"><i class="fa fa-file"></i> Choose File</span></a>
                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-primary btn-sm" id="import_link">Import</button>
                    <a href="" class="btn btn-primary btn-sm">Download Demo File</a>
                </div>
                <input type="file" name="files" id="add_upload_file" style="visibility: hidden; height:0; padding: 0;" />
            </div>
            <div class="clear"></div>
        </div>
        <div class="row loader" style="display: none;">
            <div class="col-md-12">
                <p><i class="hi hi-refresh text-info fa-spin"></i> Please wait while file is being uploaded.</p>
            </div>
            <div class="cleafix"></div>
        </div>
    </div>    
</div>

Javascript for Blueimp

    <script>
    $(document).ready(function(){
        $("#attach_file").click(function(e) {
                    e.preventDefault();
                    $("#add_upload_file").click();
        });

        var i = 0, a_ele;
                $('#add_upload_file').fileupload({
                    url: '{{route("uploadCategory")}}',
                    autoUpload: true,
                    maxNumberOfFiles: 1,
                    limitConcurrentUploads: 1,
                    acceptFileTypes: /(\.|\/)(xlsx?|csv)$/i,
                    submit: function(e, data) {
                         if (!$(".attachment").is(":visible"))
                            $(".attachment").css({display: 'block'});
                         var html = "<div class='col-md-12 attachment_box_wrapper'>" +
                                "<div class='attachment_box' id='attachment_" + i + "'>" +
                                "<div class='file_name'>" +
                                data.files[0].name +
                                "</div>" +
                                "<div class='file_progress'>" +
                                '<div class="progress progress-striped active">' +
                                '<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">0%</div>' +
                                '</div>' +
                                '</div>' +
                                '<div class="cancel_upload" id="' + data.files[0].name + '"><i class="fa fa-times"></i></div>' +
                                "</div>" +
                                "</div>" +
                                "<div class='clearfix'></div>";
                         $(".upload_text").append(html);
                         data.context = $("#attachment_" + i);
                         i++;
                         $(".message_wrapper").css("height", "calc(100% - " + $(".upload_text").outerHeight() + "px)");
                    },
                    processfail: function(e, data) {
                        alert(data.files[data.index].name + "\n" + data.files[data.index].error);
                    },
                    progress: function(e, data) {
                        var percent = parseInt(data.loaded / data.total * 100, 10);
                        $(data.context).find(".progress .progress-bar").attr("aria-valuenow", percent).css("width", percent + "%").html(percent + "%");
                    },
                    done: function(e, data) {
                        $(data.context).find(".progress").remove();

                    },
                    fail: function(e, data) {
                        console.log(data);
                    }
                });
    });
</script>

Answer 1

我也遇到了同样的问题。我在没有使用选项的情况下修复了它。

$('#add_upload_file').fileupload({
    url: "",
    add: function (e, data) {
        if($(".attachment_box").length > 0) { //Just count file listing div
            alert("Only single file can be uploaded")
            return;
        }
    },
    formData: {
    },
    progress: function (e, data) {
    },
    done: function (e, responseJSON) {
    }
});