Skip to content
Advertisement

jquery file upload check box form

I am a beginner in JS and I decided to use this library: https://blueimp.github.io/jQuery-File-Upload/

My issue is the following :

I have to send (in FormData, thus additional form) the value of 2 checkboxes. The concern is that the checkboxes are false when the page loads and the client changes its value, and in my code, the formdata takes the value of both checkboxes but without updating them during changes (checked / unchecked).

$(function() {
    "use strict";
    var e = $("<button/>").addClass("intimity-button-dark").prop("disabled", !0).text("Processing...").on("click", function() {
        var param1 = $('#guest').is("checked");
        console.log(param1);
        var e = $(this),a = e.data();
        e.off("click").text("Abort").on("click", function() {
            e.remove(), a.abort()
        }), a.submit().always(function() {
            e.remove()
        })
    });
    $("#fileupload").fileupload({
        url: "/server/php/",
        dataType: "json",
        autoUpload: !1,
        acceptFileTypes: /(.|/)(gif|jpe?g|png|mov|mp4|avi)$/i,
        maxFileSize: 5e6,
        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
        previewMaxWidth: 200,
        previewMaxHeight: 300,
        formData: {guest: $("#guest").prop('checked'), signed : $("#signed").prop('checked')},
        previewCrop: !0
    }).on("fileuploadadd", function(a, n) {
        n.context = $("<div/>").addClass('col-xs-6 col-sm-4').appendTo("#files"), $.each(n.files, function(a, t) {
            var r = $("<p/>").append($("<span/>").text(t.name));
            a || r.append("<br>").append(e.clone(!0).data(n)), r.appendTo(n.context)
        })
    }).on("fileuploadprocessalways", function(e, a) {
        var n = a.index,
            t = a.files[n],
            r = $(a.context.children()[n]);
        t.preview && r.prepend("<br>").prepend(t.preview), t.error && r.append("<br>").append($('<span class="text-danger"/>').text(t.error)), n + 1 === a.files.length && a.context.find("button").text("Upload").prop("disabled", !!a.files.error)
    }).on("fileuploadprogressall", function(e, a) {
        var n = parseInt(a.loaded / a.total * 100, 10);
        $("#progress .progress-bar").css("width", n + "%")
    }).on("fileuploaddone", function(e, a) {
        $.each(a.result.files, function(e, n) {
            if (n.url) {
                var t = $("<a>").attr("target", "_blank").prop("href", n.url);
                $(a.context.children()[e]).wrap(t)
            } else if (n.error) {
                var r = $('<span class="text-danger"/>').text(n.error);
                $(a.context.children()[e]).append("<br>").append(r)
            }
        })
    }).on("fileuploadfail", function(e, a) {
        $.each(a.files, function(e) {
            var n = $('<span class="text-danger"/>').text("File upload failed.");
            $(a.context.children()[e]).append("<br>").append(n)
        })
    }).prop("disabled", !$.support.fileInput).parent().addClass($.support.fileInput ? void 0 : "disabled")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Add files...</span>
<input id="fileupload" style="display:none;" type="file" name="files[]" multiple>

<input type="checkbox" id="guest" name="guest" value="1">
<input type="checkbox" id="signed" name="signed" value="1">

So, how can I make the “format” retrieve the current values?

Advertisement

Answer

Well, I’ve win with this:

        var e = $ ("<button />"). addClass ("intimity-button-dark"). prop ("désactivé",! 0) .text ("Traitement ..."). on ("clic", fonction() {
        $ ('# fileupload'). bind ('fileuploadsubmit', fonction (e, données) {
            data.formData = {invité: $ ('# invité'). is (": checked"), signé: $ ('# signed'). is (": checked")};
            console.log ($ ('# invité'). is ("vérifié") + "|" + $ ('# signed'). is ("checked"))
        });
        var param1 = $ ('# invité'). est ("vérifié");
        console.log (param1);
        var e = $ (this), a = e.data ();
        e.off ("click"). text ("Abort"). on ("clic", function () {
            e.remove (), a.abort ()
        }), a.submit (). always (function () {
            e.remove ()
        })
    });
    $ ("# fileupload"). fileupload ({
        url: "/ server / php /",
        dataType: "json",
        autoUpload:! 1,
        acceptFileTypes: /(.|/)(gif|jpe?g|png|mov|mp4|avi)$/i,
        maxFileSize: 5e6,
        disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator.userAgent),
        previewMaxWidth: 200,
        AperçuMaxHauteur: 300,
        previewCrop:! 0
    })

the .bind (‘fileuploadsubmit’ allows me to reconfigure the fileupload, when I click on an “upload” button it modifies the configuration by directly sending the current value of the checkboxes.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement