Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
306 views
in Technique[技术] by (71.8m points)

javascript - Jquery Form Submission after file upload

I realise this variation of question has appeared many times, but none that I can find which answer this question in this kind of context.

I am using a third party fileuploader, which utilises jQuery and gives a success callback when the file upload completes.

What I want to achieve is a form with text fields, along with the fileuploader, which when you click 'Submit', fires off the upload function (and the file begins to upload with it's progress bar), and waits for the success callback before proceeding to submit the form.

I have to admit immediately that I am a complete idiot with jQuery and it confuses me utterly, so I am very unsure how to achieve this.

My attempts thus far only result in the form attempting to submit immediately while the file upload is in progress.

The function manualuploader.uploadStoredFiles(); is instantiated when clicking the 'Upload now' button.

The jQuery which instantiates the file uploader is as follows:

<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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I noticed you're using jQuery. Why don't you use the jQuery wrapper for Fine Uploader?

I would listen to the onComplete callback which is fired once an upload finishes (sucessful or not). When onComplete is fired we make it to submitForm() which contains the logic for checking that all the files have been submitted successfully.

The logic is relatively simple: if we have no files in progress and there are no files that have a qq.status of FAILED then we can proceed to submit the form.

Also, I listen to the onCancel callback to make sure that the form will submit if uploads did not succeed and thus were cancelled.

There are many more callbacks. I'd suggest reading up on the Fine Uploader docs on callbacks as well as API methods. Furthermore, I would look at the Fine Uploader jQuery docs.

If understanding jQuery is your problem then I'd suggest keeping this nearby.

<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);
        } 
    });
});

Let me know if you have any more questions that I can assist with.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...