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.