Implementation of HTML5 file upload progress bar based on HT for web vector

In the HTML, in the process of file upload, a lot of things are not any hint, this experience is very bad, users do not know when the upload, upload succeeded No, so today to introduce the content is through the HT for Web Vector to implement the HTML5 file upload progress bar, vector in the " Vector Chart chart embedded HTML5 network topology diagram application " in the article has described the Setcomptype () method of application, today we use SetImage () Methods to make full use of the vector resources defined in the system to implement the file upload progress bar, we first look at:

As you can see, a MP4 file is uploaded to the server and the current upload progress is displayed at the bottom.

So, let's explore the following specific implementations:

First, let's analyze the structure of the progress bar:

1. Need a background, background

2. A current progress value is required and value

3. Need a foreground, foreground, based on the current progress value, draw the foreground, cover the background

structure is so simple, then the next step is to implement the specific, look at the code:

Ht. Default.setimage (' progress ', {    width:150,    height:12,    comps: [        //Draw background        {            type: ' Rect ',            Rect: {x:0, y:0, width:115, height:12},            background: {func:function (data) {return data.a (' background ');}}        },        //Draw foreground        {            rect: {x:0, y:0, width:115, height:12},            type:function (g, rect, comp, dat A, view) {                var width = rect.width, height = rect.height, value = Data.getvalue (),                     forewidth = width/100 * Valu e;                G.fillstyle = data.a (' foreground ');                G.fillrect (0, 0, forewidth, height);            }        }    ]});

We define a vector object named progress, a vector object consisting of two parts, a background and a foreground.

The drawing background is based on the data binding, the Background property of the database is bound, the drawing foreground is drawn by the method of the custom type, and is an abbreviation of the Setcomptype () method, which calculates the drawing width based on the value values in data.

The general design of the vector has been completed, so let's use it to see how it works.

var Datamodel = new ht. Datamodel (),    node = new ht. Node (); node.setvalue (0); Node.setimage (' progress '); Node.a (' Background ', ' #5F6870 '); Node.a (' foreground ', ' #58B6DA ' ); NODE.P ();d Atamodel.add (node), var graphview = new Ht.graph.GraphView (Datamodel); Graphview.addtodom (); Graphview.layout ({x:0, y:80, width:170, height:30});

We created a node, set the Image property of node to our defined vector, and then created a Graphview component that displays node in the Graphview network topology diagram .

Then let's simulate the file upload progress and let the progress bar move up.

function Setprogressvalue (node) {    var value = Node.getvalue ();    if (value!==) {        Node.setvalue (value + 1);        var second = Math.Round (Math.random () *);        SetTimeout (Setprogressvalue, Second, node);}    }

We keep setting the value of node by using the SetTimeout () method, but as the code runs you will find that the progress bar is not moving at all, consistent in its initial state, and when we zoom Graphview, we can see that the progress bar is changing. In fact, the reason is very simple, when we modify the value, we do not notify Graphview to update, so the progress bar will not be changed because of the value of node change, then how can we notify the Graphview update? The method is simple, after you modify the value of node, dispatch a PropertyChange event, and add the following code after creating the node code:

Node.getvalue = function () {    return this._value;}; Node.setvalue = function (value) {    var self = this,        OV = Self._value;    Self._value = value;    SELF.FP (' value ', OV, value);};

In the code, the PropertyChange event is distributed through the FP () method, so that the progress bar works correctly and changes as node's value changes, as follows:

But there is a little bit, although the progress bar is running, but we still do not know the current progress value is how much, only through the proportion of the progress bar to approximate the current progress value, we can add a text on the progress bar to display the current progress value, the answer is yes, We just need to add the following code to the comps of the vector:

Draw text {    rect: {x:118, y:0, width:32, height:12},    type: ' Text ',    text: {func:function (data) {Retur n data.getvalue () + '% ';},    font: ' 12px Arial, Sans-ferif ',    color: ' Black '}

The Code also applies the binding, which binds the current value of node, as follows:

Now the progress bar and the final effect is a round angle, then how to achieve the fillet angle? In fact, it is not difficult, only need to draw a rounded rectangle, and combined with the clip () method will be outside the corner of the rectangular area to intercept, the clip () method of the detailed description can refer to the introduction of the MDN .

1. First, we need to create a method of waving rounded rectangles:

/*** * Draw round Edge Rectangle * @param CTX BRUSH * @param x Coordinate x * @param y coordinate y * @param width Width * @param height height * @param radius Corner Radius * * function RoundRect (CTX, x, y, Width, height, radius) {    ctx.beginpath ();    Ctx.moveto (x, y + radius);    Ctx.lineto (x, y + height-radius);    Ctx.quadraticcurveto (x, y + height, x + radius, y + height);    Ctx.lineto (x + width-radius, y + height);    Ctx.quadraticcurveto (x + width, y + height, x + width, y + height-radius);    Ctx.lineto (x + width, y + radius);    Ctx.quadraticcurveto (x + width, y, x + Width-radius, y);    Ctx.lineto (x + radius, y);    Ctx.quadraticcurveto (x, y, x, y + radius);}

2. Using a custom type method, call the RoundRect () method, draw a rounded rectangular area, and then call the clip () method to truncate the outer part of the rounded rectangular area. It is important to note that the clip () method intercepts only the content that is drawn after the method is used, and the content drawn before the method is called will not be truncated. So the following code must be placed before the code that paints the background.

Draw Rounded Rectangle {    rect: {x:0, y:0, width:115, height:12},    type:function (g, Rect, comp, data, view) {        var w Idth = rect.width, height = rect.height;        RoundRect (g, 0, 0, width, height, height/2);        G.clip ();    }}

See how it works.

At this point, the design of the progress bar is over, so let's look at how the progress bar is combined with the file upload:

1. First, we need to have a server to receive files, in addition to the use of regular Web servers in the server (Web server simple configuration can be referred to:HT for Web HTML5 Tree Component delay loading technology implementation ), also used the Formidable module , the following is the code for the server:

var express = require (' Express '), App = Express (), Server = require (' http '). Createserver (APP), Io = require (' Sock Et.io ') (server), Path = require (' path '), root = Path.join (__dirname, '. /.. /.. /'), formidable = require (' formidable ');//IO Monitor Connection Event Io.on (' Connection ', function (socket) {//define socket name so Cket.join (' upload ');}); /Set the server's working path App.use (express.static (root)); App.post ('/', function (req, res) {var form = new Formidable.    Incomingform ();    Form.on (' End ', function () {res.end (' upload complete! ');    }); Form.on (' Progress ', function (bytesreceived, bytesexpected) {var percent = Math.floor (bytesreceived/bytesexpected        * 100);    Gets the specified socket and dispatches the event io.sockets.in (' upload '). Emit (' progress ', percent);    }); Form.parse (req);}); /server Monitoring 4000 Port Server.listen ((), function () {Console.log (' server is listening at Port 3000 ');});

2. Secondly, we need to design a file upload form:

<form method= "POST" action= "/" enctype= "Multipart/form-data" name= "Fileform" >    <p><input type= " File "name=" file "/></p>    <p><input type=" Submit "value=" Upload "/></p></form>

3. Furthermore, we need to combine Ajax with no flush to upload files to the server, and in conjunction with socket technology to listen to server events, in the browser how to use the socket can refer to:HT for Web HTML5 Tree Component delay loading technology implementation .

var fileform = Document.forms.namedItem (' Fileform '); Fileform.addeventlistener (' Submit ', function (e) {    var HttpRequest;    if (window. XMLHttpRequest) {//Mozilla, Safari, ie7+        ... HttpRequest = new XMLHttpRequest ();    }    else if (window. ActiveXObject) {//IE 6 and older        HttpRequest = new ActiveXObject ("Microsoft.XMLHTTP");    }    Httprequest.open (' POST ', '/', true);    Httprequest.send (New FormData (Fileform));    Socket.on (' Progress ', function (val) {        progress.setvalue (val);    });    E.preventdefault ();}, False);

So, based on the HT for Web custom class implementation of the HTML5 file upload progress bar page design and code design complete, due to the length of the relationship, in the fromidable aspect of less, also hope forgive me, below I say attached complete code, interested students can download down research and research.

Click to download the source code

Implementation of HTML5 file upload progress bar based on HT for web vector