上传文件后提交JQuery表单

小编典典

上传文件后提交JQuery表单

ajax

我意识到这个问题的变体已经出现了很多次，但是我找不到在这种情况下能回答这个问题的人。

我正在使用第三方fileuploader，该文件利用jQuery并在文件上传完成时给出成功回调。

我要实现的是一个带有文本字段的表单以及fileuploader，当您单击“提交”时，该表单将触发上传功能（文件开始使用进度条开始上传），并等待成功回调之前继续提交表格。

我必须立即承认我是jQuery的白痴，这使我完全困惑，所以我不确定如何实现这一点。

到目前为止，我的尝试仅导致表单尝试在文件上载时立即提交。

manualuploader.uploadStoredFiles();单击“立即上传”按钮时，将实例化该功能。

实例化文件上传器的jQuery如下：

<form action="index.php" method="post" enctype="multipart/form-data" id="uploader">
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<input type="text" name="textbox" value="Test data">
<input name="test" type="button" value="Upload now">
</div>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>
<script>
$(document).ready(function() {
var manualuploader = new qq.FineUploader({
        element: $('#manual-fine-uploader')[0],
        request: {
                endpoint: 'uploader.php'
        },
        autoUpload: false,
        text: {
                uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
        }
        });
        $('#triggerUpload').click(function() {      
        manualuploader.uploadStoredFiles();
        });
});

</script>

阅读 252

2020-07-26

共1个答案

小编典典

我注意到您正在使用jQuery。您为什么不将jQuery包装器用于Fine
Uploader？

我将收听onComplete上载完成（成功与否）后触发的回调。当onComplete被触发时，我们将在submitForm()其中包含用于检查所有文件是否已成功提交的逻辑。

逻辑相对简单：如果我们没有正在进行的文件，也没有文件包含qq.status，FAILED那么我们可以继续提交表单。

另外，我会侦听onCancel回调，以确保如果上传不成功并因此被取消，则表单将提交。

还有更多的回调。我建议阅读有关回调以及API方法的Fine
Uploader文档。此外，我将看一下Fine Uploader jQuery
docs。

如果了解jQuery是您的问题，那么建议您将其保留在附近。

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>

<form action="index.php" method="post" id="uploader">
<input type="text" name="textbox" value="Test data">
    <div id="manual-fine-uploader"></div>
    <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
    </div>
</form>



$(document).ready(function() {

    $("#triggerUpload").click(function () {
        $("#manual-fine-uploader").fineUploader('uploadStoredFiles'); 
    });

    function submitForm () { 
        if ($(this).fineUploader('getInProgress') == 0) {
            var failedUploads = $(this).fineUploader('getUploads', 
                { status: qq.status.UPLOAD_FAILED });
            if (failedUploads.length == 0) {    
                // do any other form processing here
                $("#uploader").submit();
            }
        }
    };

    // Instantiate a Fine Uploader instance:
    $("#manual-fine-uploader").fineUploader({
        autoUpload: false,
        request: {
            endpoint: "/uploads_bucket"
        }
    }).on("complete", function (event, id, name, response) {
        submitForm.call(this);
    }).on('statusChange', function (event, id, oldStatus, newStatus) {
        if (newStatus === qq.status.CANCELED) {
            submitForm.call(this);
        } 
    });
});

让我知道您是否还有其他需要协助的问题。

2020-07-26