Question

我正在尝试实现用户单击图标以选择文件的功能。如果文件有效，它会自动开始上传并显示进度条。完成后，它通过AJAX提交数据并在div中发布响应。

到目前为止，我设法做的是验证文件类型并使用进度条开始上传。但是当上传完成时，会调用url / action但不会发送数据。我尝试过转储POST，FILES，GET和REQUEST，但它们都是空的。这是我的代码：

$('#attachmentForm').bootstrapValidator({
    container: 'tooltip',
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-check',
        invalid: 'glyphicon glyphicon-cross',
        validating: 'glyphicon glyphicon-cycle'
    },
    fields: {
        attachment: {
            validators: {
                notEmpty: {
                    message: 'Please select a valid file.'
                },
                file: {
                    extension: 'jpg,jpeg,png,zip',
                    type: 'image/jpeg,image/png,application/zip',
                    maxSize: 1024 * 1024 * 20000,
                    message: 'The selected file is not valid.'
                }
            }
        }
    }
})
.on('success.field.bv', function(e, data) {    // detect presence of a valid file
    e.preventDefault();

    var progressBar = $('.progress-bar');
    var progressText = $('.selectfile').val();

    // Had to manually trigger a hidden button to submit form. If you have a better way to do this, I'm all ears.
    $('.attachmentForm-btn').trigger('click');   

    $('.upload-progress').slideDown(500);
    $('.cancelupload').slideDown(500);

    $('#attachmentForm').ajaxForm({
        beforeSend: function(xhr) {
            $('.cancelupload').click(xhr.abort)    // Need to include a cancel button. Will this work?
            var percentVal = '0%';
            progressBar.html('Uploading: '+ progressText.split('\\').pop());
            progressBar.width(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            progressBar.width(percentVal);
        },
        complete: function(xhr) {
            progressBar.width("100%");
            console.log(xhr.responseText);
        },
        type: 'post',
        url: posturl
    }); 
})

这是表格

<form id="attachmentForm" name="attachmentForm" method="post" enctype="multipart/form-data" novalidate="novalidate">
    <div class="form-group selectfile-wrap">
        <input type="hidden" name="task" value="uploadAttachment" />
        <input type="file" class="form-control selectfile" name="attachment" />
        <button class="attachmentForm-btn" type="submit" style="display:none;"></button>
    </div>
</form>

感谢您的时间

Answer 1

像这样解决了：

$('#attachmentForm').bootstrapValidator({
    container: 'tooltip',
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-check',
        invalid: 'glyphicon glyphicon-cross',
        validating: 'glyphicon glyphicon-cycle'
    },
    fields: {
        attachment: {
            validators: {
                notEmpty: {
                    message: 'Please select a valid file.'
                },
                file: {
                    extension: 'jpg,jpeg,png,zip',
                    type: 'image/jpeg,image/png,application/zip',
                    maxSize: 1024 * 1024 * 20000,
                    message: 'The selected file is not valid.'
                }
            }
        }
    }
})
.on('success.field.bv', function(e, data) {
    $('#attachmentForm .uploadfilebtn').trigger('click');
})


$('#attachmentForm').ajaxForm({
    url: siteroot +'ajaxreq',
    type: 'post',
    data: {/* data here */},
    datatype: 'json',
    beforeSend: function(xhr) {
        $('.upload-progress').slideDown(500);
        $('.cancelupload').slideDown(500);

        var ProgressText = $('.selectfile').val();

        $('.cancelupload').click(xhr.abort)
        var percentVal = '0%';
        $('.progress-bar').html('Uploading: '+ ProgressText.split('\\').pop());
        $('.progress-bar').width(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        $('.progress-bar').width(percentVal);
    },
    complete: function(xhr) {
        $('.progress-bar').width("100%");
        console.log(xhr.responseText);
    },
});

JQuery，bootstrapValidator和ajaxForm（malsup） - 没有发布数据

1 个答案: