Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Upload > Markup and Scripting

The HTML markup for a wijUpload widget looks like this.

Markup
Copy Code
<div id="upload" style="width: 300px"></div>

You can initialize the widget with the following jQuery script.

Script
Copy Code
<script id="script1" type="text/javascript">
    var supportXhr;
    $(document).ready(function ($) {
        var progressbar = $("#progressbar");
        var upload = $("#upload").wijupload({
            change: function (e, data) {
            },
            upload: function (e, data) {
            },
            totalUpload: function () {
                progressbar.show();

            },
            complete: function (e, data) {
            },
            totalComplete: function (e, data) {

                progressbar.fadeOut(1500, function () {
                    if (supportXhr) {
                        $("#progressbar").wijprogressbar("option", "value", 0);
                    }

                });

                if (data.e.currentTarget.status != 200) {
                    alert("Upload failed!");
                }

            },
            totalProgress: function (e, data) {
                if (supportXhr) {
                    $("#progressbar").wijprogressbar("option", "maxValue", data.total);
                    $("#progressbar").wijprogressbar("option", "value", data.loaded);
                }

            },
            action: "http://localhost:2164/Main/Widgets/Wijmo-Complete/development-bundle/samples/upload/upload.ashx"
        });
        supportXhr = $("#upload").wijupload("supportXhr");
        if (supportXhr) {
            progressbar.wijprogressbar({ value: 0 });
        } else {
            progressbar.addClass("Loading");

        }
        progressbar.hide();
    });
</script>

The markup and script featured here results in the following live widget. Click the Upload Files button to open the dialog.

See Also

Reference