Effect Demo:
http://www.never-online.net/tutorial/js/upload/
Javascript & DHTML Instance Programming (tutorials) (iii), primary instances-uploading file control instances
The above chapter basically has to explain the basic knowledge to say some, today finally began to write the code: D
First, let's do an example of a batch upload UI control. Examples that are typically done in the future are also dominated by UI controls. are encapsulated as object or encapsulated as "class" by function.
Perhaps the example is too esoteric for a friend to look at the first few chapters, but don't worry, one step at a time to explain what should be quickly understood is to understand how to do it, not how to write it.
If there is no understanding of friends, you can leave a message to me.
First look at a finished product screenshot preview:
First, we start with the idea, define a upload "class",
i), the public access information for this class should be:
1, the constructor must pass some necessary parameters, for example, in which container constructs the upload information.
2, must have an Add () method, to add a upload
3, must have a remove () method, used to delete a upload
Second, this class should have some necessary information, is to generate the information that the instance itself has, (some information of the upload object).
1, get a total number of upload information,
2, a Container object, this object is also passed from the constructor.
The whole diagram can be simply expressed as
Second, I think we should think about what knowledge should be used, which is familiar, which is unknown.
One), as we have seen in the preview above, requires three or more new controls. (Add, delete, and a file control, or else ...) But at least that's what the eye sees, and since it's the new information, it's possible to use document.createelement, and to add it to a container you might use Object.appendchild (obj) or Obj.insertbefore () Method. Delete is Obj.parentNode.removeChild (obj). These last chapters have been said.
Second, since it is a control, it must be a function or an object (object) encapsulation, for this part of knowledge, the first chapter has simply explained
Thirdly, how to organize it? There are also words and illustrations in the above ideas.
The next step is to write:
i), constructors, and basic code (pseudo code)
<script>
function upload (target/* container * *
)
{
this._cnt = 0; /* Counter */
This.target = document.getElementById (target);
};
Upload.prototype.add = function () {
/*
* Generate a file
* Generate an Add
* Generate a Delete
* Counter +1
*/
};
Upload.prototype.remove = function () {
/*
* Delete a file
* Delete an added
* Delete a Delete
*/
};
</script>
Second, write out the implementation of the Add method
<script>
Upload.prototype.add = function () {
/*
* Generate a file
*/
var self = this; var cnt = this._cnt;
var cFile = document.createelement ("input");
cfile.type= "File"; Cfile.name= "Upload";
Cfile.id = "Upload_file_" +CNT;
/*
* Generate an Add
*/
var cAdd = document.createelement ("span");
Cadd.innerhtml= "Add";
Cadd.onclick = function () {
Self.add ();
};
/*
* Generate a Delete
*/
var cremove = document.createelement ("span");
Cremove.innerhtml= "Delete";
Cremove.onclick = function () {
Self.remove (CNT);
};
Cadd.id = "Upload_add_" +CNT;
Cremove.id = "Upload_remove_" +CNT;
/* Add all generated information to the container/*
This.target.appendChild (CFile);
This.target.appendChild (CADD);
This.target.appendChild (Cremove);
/* Counter +1 * *
this._cnt++;
return this; Return
};
</script>
Third, write out the implementation of the Remove method
<script>
Upload.prototype.remove = function (n) {
/*
* Delete a file
*/
var a = document.getElementById ("Upload_file_" +n);
A.parentnode.removechild (a);
/*
* Delete an added
*/
var a = document.getElementById ("upload_add_" +n);
A.parentnode.removechild (a);
/*
* Delete a Delete
*/
var a = document.getElementById ("upload_remove_" +n);
A.parentnode.removechild (a);
return this;
}
</script>
The above remove method is too repetitive to consider simplifying the remove again, making our code shorter and easier to maintain. Here, we put this generic function into a function, which is to add a function:
<script>
Upload.prototype._removenode = function (ID) {
var A=document.getelementbyid (ID);
A.parentnode.removechild (a);
};
Upload.prototype.remove = function (n) {
/*
* Delete a file
*/
This._removenode ("Upload_file_" +n);
/*
* Delete an added
*/
This._removenode ("Upload_add_" +n);
/*
* Delete a Delete
*/
This._removenode ("Upload_remove_" +n);
return this;
}
</script>
Four, the combination of code, basically can be considered complete: D
<script>
function upload (target/* container * *
)
{
this._cnt = 0; /* Counter */
This.target = document.getElementById (target);
};
Upload.prototype.add = function () {
/*
* Generate a file
*/
var self = this; var cnt = this._cnt;
var cFile = document.createelement ("input");
cfile.type= "File"; Cfile.name= "Upload";
Cfile.id = "Upload_file_" +CNT;
/*
* Generate an Add
*/
var cAdd = document.createelement ("span");
Cadd.innerhtml= "Add";
Cadd.onclick = function () {
Self.add ();
};
/*
* Generate a Delete
*/
var cremove = document.createelement ("span");
Cremove.innerhtml= "Delete";
Cremove.onclick = function () {
Self.remove (CNT);
};
Cadd.id = "Upload_add_" +CNT;
Cremove.id = "Upload_remove_" +CNT;
/* Add all generated information to the container/*
This.target.appendChild (CFile);
This.target.appendChild (CADD);
This.target.appendChild (Cremove);
/* Counter +1 * *
this._cnt++;
return this; Return
};
Upload.prototype._removenode = function (ID) {
var A=document.getelementbyid (ID);
A.parentnode.removechild (a);
};
Upload.prototype.remove = function (n) {
/*
* Delete a file
*/
This._removenode ("Upload_file_" +n);
/*
* Delete an added
*/
This._removenode ("Upload_add_" +n);
/*
* Delete a Delete
*/
This._removenode ("Upload_remove_" +n);
return this;
}
</script>
Five, OK, let's run this control:
<script>
Here is the control code we wrote above, and I'm not going to post it because of space.
</script>
<body>
<div id= "Uploadcontainer" ></div>
<script>
var o=new upload ("Uploadconainer");
O.add ();
</script>
</body>
Six, well, have seen the effect of it, but it seems not ideal, all the added are glued together, it is necessary to beautify. Where do I start? There are many options here:
1. Add a line feed <br>
2, each add a upload and then add a container div
... Wait
We add a container here, and if something is added in the future, it will be better, and modify add:
<script>
Upload.prototype.add = function () {
/*
* Generate a file
*/
var self = this; var cnt = this._cnt;
var cwrap = document.createelement ("div");
Cwrap.id = "Upload_wrap_" +CNT;
var cFile = document.createelement ("input");
cfile.type= "File"; Cfile.name= "Upload";
Cfile.id = "Upload_file_" +CNT;
/*
* Generate an Add
*/
var cAdd = document.createelement ("span");
Cadd.innerhtml= "Add";
Cadd.onclick = function () {
Self.add ();
};
/*
* Generate a Delete
*/
var cremove = document.createelement ("span");
Cremove.innerhtml= "Delete";
Cremove.onclick = function () {
Self.remove (CNT);
};
Cadd.id = "Upload_add_" +CNT;
Cremove.id = "Upload_remove_" +CNT;
/* Add all generated information to the container/*
Cwrap.appendchild (CFile);
Cwrap.appendchild (CADD);
Cwrap.appendchild (Cremove);
This.target.appendChild (Cwrap);
/* Counter +1 * *
this._cnt++;
return this; Return
};
</script>
Seven, plus CSS landscaping, the final code is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title> Upload control-http://www.never-online.net </title>
<style type= "Text/css" media= "All" title= "Default" >
* {font-family:arial;}
body {font-size:10pt;}
H1 {}
#footer {font-size:9pt; margin:20px;}
span {margin:3px; text-decoration:underline; cursor:default;}
</style>
<script type= "Text/javascript" >
<! [cdata[
function upload (target) {
this._cnt = 0;
This.target = document.getElementById (target);
};
Upload.prototype.add = function () {
var self = this; var cnt = this._cnt;
var cwrap = document.createelement ("div");
Cwrap.id = "Upload_wrap_" +CNT;
var cFile = document.createelement ("input");
cfile.type= "File"; Cfile.name= "Upload";
Cfile.id = "Upload_file_" +CNT;
var cAdd = document.createelement ("span");
Cadd.innerhtml= "Add";
Cadd.onclick = function () {
Self.add ();
};
var cremove = document.createelement ("span");
Cremove.innerhtml= "Delete";
Cremove.onclick = function () {
Self.remove (CNT);
};
Cadd.id = "Upload_add_" +CNT;
Cremove.id = "Upload_remove_" +CNT;
Cwrap.appendchild (CFile);
Cwrap.appendchild (CADD);
Cwrap.appendchild (Cremove);
This.target.appendChild (Cwrap);
this._cnt++;
return this;
};
Upload.prototype._removenode = function (ID) {
var A=document.getelementbyid (ID);
A.parentnode.removechild (a);
};
Upload.prototype.remove = function (n) {
This._removenode ("Upload_file_" +n);
This._removenode ("Upload_add_" +n);
This._removenode ("Upload_remove_" +n);
return this;
};
onload = function () {
var o = new Upload ("container");
O.add ();
};
]]>
</script>
<body id= "Www.never-online.net" >
<div id= "Container" ></div>
<div id= "Footer" >tutorial of DHTML and JavaScript programming, power by never-online.net</div>
</body>
