マークアップとスクリプティング

wijUpload ウィジェットの HTML マークアップは次のようになります。

マークアップ	コードのコピー
<div id="upload" style="width: 300px"></div>

次の jQuery スクリプトでウィジェットを初期化できます。

スクリプト	コードのコピー
<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>

スクリプト

コードのコピー

<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>

ここで説明しているマークアップとスクリプトの結果は次のようになります。［Upload Files］ボタンをクリックすると、ダイアログが開きます。

関連トピック

参照