At first I saw ZK 5: New File Upload , i like the effect of upload progress monitor. But i found out that really take effort for browsers to initialize a Popup, so i decided to create a simple sample for the demo. Following are some steps about the demo,

Creating my own object by extending zk.Object. And copy the API of an “Upload Viewer” from the original article;

    zk.UPMSample1 = zk.$extends(zk.Object, {
        updated : null,
        $init : function(uplder, filenm) { //constructor
        update : function(sent, total) {

        destroy : function() {


I choosed simple structure instead of default Upload Viewer. Only one zul.wgt.Html and one zul.wgt.Progressmeter getting together in an Hlayout. When it shows up, I add it to a Vlayout named “flist” below Subject and Attach Button.

 zk.Widget.$(jq("$flist")).appendChild(//get ZK widget by "jq" then append data to it
	    children: [
		new zul.wgt.Html({
		new zul.wgt.Progressmeter({
			id: id + "_pgs"

Define actions during file uploading (update) and uploading finish(destory)

        * @param sent : percent finished of upload file
        * @param total : total size of upload file
        update : function(sent, total) { 
            zk.Widget.$(jq('$' + + '_pgs')).setValue(sent);
        destroy : function() {
            var layout = jq('$' + + "_layout");
            layout.animate({ width: 1}, 500, function() {

Define my upload progress monitor to the Attach button

See how it work like here

Reference :
ZK 5: New File Upload
Client Side Programming
ZK JsDoc : zk.Object
ZK JsDoc : zk.afterMount

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

2 Responses to “ZK Demo How to – Upload Effect”

  1. Joe says:

    Impressive! Thanks for the information.

  2. Victor says:

    =O ty

Leave a Reply