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,

1.
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() {

        }
    });

2.
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
	new zul.box.Hlayout({
		//...
	    children: [
		new zul.wgt.Html({
			//...
		}),
		new zul.wgt.Progressmeter({
			id: id + "_pgs"
		})]
	})  
);

3.
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('$' + this._uplder.id + '_pgs')).setValue(sent);
            
        },
        destroy : function() {
            var layout = jq('$' + this._uplder.id + "_layout");
            layout.animate({ width: 1}, 500, function() {
                zk.Widget.$(layout).detach();
            });
        }

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