search
HomeWeb Front-endJS TutorialJavascript & DHTML Example Programming (Tutorial) (3) Elementary Example 1—Upload File Control Example_Basic Knowledge

效果DEMO:
http://www.never-online.net/tutorial/js/upload/
Javascript & DHTML 实例编程(教程)(三),初级实例篇—上传文件控件实例
上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D
首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。

也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解释应该很快理解的,关键是理解怎么做,而不是怎么写。

如果还有不懂的朋友,可以留言给我。
首先看一个成品截图预览:

http://www.never-online.net/tutorial/js/upload/upload_preview.png


一、接下来我们先说思路,首先定义一个upload"类",

一)、这个类的公共访问信息应该有:
1、构造函数中要传递一些必要的参数,比如,在哪个容器构造upload的信息。
2、必须有一个add()方法,用于添加一个upload
3、必须有一个remove()方法,用于删除一个upload

二)、这个类中应该有一些必要的信息,是生成实例本身所具有的信息,(upload对象的一些信息)。
1、得到一共多少个upload信息,
2、一个容器对象,这个对象也是从构造函数中传递。

整个图可以简单的表示为

http://www.never-online.net/tutorial/js/upload/upload_UML.png


2. I think we should think about what knowledge should be used, which ones are familiar and which ones are unknown.

1). As we can see in the preview above, three or more new controls are required. (Add, delete, there is a file control, or there may be others...but at least that’s what the eyes can see), since it is new information, document.createElement may be used, and it needs to be added. The object.appendChild(obj) or obj.insertBefore() method may be used in a container. Deletion is obj.parentNode.removeChild(obj). All this has been said in the previous chapter.

2). Since it is a control, it must be encapsulated with a function or an object. This part of the knowledge has been briefly explained in Chapter 1.

3) How What about organizations? There are already text and illustrations in the above ideas

Next, let’s start writing:
1), constructor, and basic code (pseudocode)


<script> <BR>function upload(target/*container*/ <BR>                          )                                                                                                     target); <BR>}; <BR><BR>upload.prototype.add = function () { <BR> /* <br> * Generate a file <br> * Generate an add <BR> * Generate a delete <BR> *Counter 1 <BR> */ <BR>}; <BR><BR>upload.prototype.remove = function () { <BR> /* <br> *Delete a file <br> *Delete a Add <BR> *Delete one Delete <BR> */ <BR>}; <BR></script>

2. Write the implementation of the add method

<script> <br>upload.prototype.add = function () { <br> /* <br> *Generate a file <BR> */ <BR> var self = this; var cnt = this._cnt; <BR> var cFile = document.createElement("input"); <BR> cFile.type="file"; cFile.name="upload"; <BR> cFile.id = "upload_file_" cnt; <BR> /* <BR> * Generate an Add<BR> */ <BR> var cAdd = document.createElement("span"); <BR> cAdd.innerHTML="Add"; <BR> cAdd.onclick = function () { <BR> self. add(); <BR> }; <BR> /* <BR> *Generate a delete<BR> */ <BR> var cRemove = document.createElement("span"); <BR> cRemove.innerHTML="Delete "; <BR> cRemove.onclick = function () { <BR> self.remove(cnt); <BR> }; <BR><BR> cAdd.id = "upload_add_" cnt; <BR> cRemove.id = "upload_remove_" cnt; <br><br> /* Add all generated information to the container */ <BR> this.target.appendChild(cFile); <br> this.target.appendChild(cAdd); <br> this.target.appendChild(cRemove); <BR><BR> /* counter 1 */ <BR> this._cnt; <br><br> return this; //return <BR>}; <br>&lt ;/script> <br><BR>3. Write the implementation of the remove method <BR><br><script> <br>upload.prototype.remove = function (n) { <br> /* <br> *Delete a file <BR> */ <BR> var a = document.getElementById("upload_file_" n); <BR> a.parentNode.removeChild(a); <BR> /* <BR> *Delete a Add<BR> */ <BR> var a = document.getElementById("upload_add_" n); <BR> a.parentNode.removeChild(a); <BR> /* <BR> *Delete one Delete <BR> */ <BR> var a = document.getElementById("upload_remove_" n); <BR> a.parentNode.removeChild(a); <BR><BR> return this; <BR>} <br></script>

The above remove method is too repetitive. Can we consider re-simplifying the remove method to make our code shorter and easier to maintain?在这里,我们把这个通用功能放到一个函数里,也就是多加一个函数:

<script> <BR>upload.prototype._removeNode = function (id) { <BR> var a=document.getElementById(id); <BR> a.parentNode.removeChild(a); <BR>}; <br><br>upload.prototype.remove = function (n) { <BR> /* <BR> *删除一个 file <BR> */ <BR> this._removeNode("upload_file_" +n); <BR> /* <BR> *删除一个 添加 <BR> */ <BR> this._removeNode("upload_add_" +n); <BR> /* <BR> *删除一个 删除 <BR> */ <BR> this._removeNode("upload_remove_" +n); <br><br> return this; <BR>} <BR></script>

四、将代码组合一下,基本上可以算是完成了:D

<script> <BR>function upload(target/*容器*/ <BR> ) <BR>{ <BR> this._cnt = 0; /*计数器*/ <BR> this.target = document.getElementById(target); <BR>}; <br><br>upload.prototype.add = function () { <BR> /* <BR> *生成一个 file <BR> */ <BR> var self = this; var cnt = this._cnt; <BR> var cFile = document.createElement("input"); <BR> cFile.type="file"; cFile.name="upload"; <BR> cFile.id = "upload_file_" +cnt; <BR> /* <BR> *生成一个 添加 <BR> */ <BR> var cAdd = document.createElement("span"); <BR> cAdd.innerHTML="添加"; <BR> cAdd.onclick = function () { <BR> self.add(); <BR> }; <BR> /* <BR> *生成一个 删除 <BR> */ <BR> var cRemove = document.createElement("span"); <BR> cRemove.innerHTML="删除"; <BR> cRemove.onclick = function () { <BR> self.remove(cnt); <BR> }; <br><br> cAdd.id = "upload_add_" +cnt; <BR> cRemove.id = "upload_remove_" +cnt; <br><br> /* 把所有生成的信息添加到容器中 */ <BR> this.target.appendChild(cFile); <BR> this.target.appendChild(cAdd); <BR> this.target.appendChild(cRemove); <br><br> /* 计数器+1 */ <BR> this._cnt++; <br><br> return this; //返回 <BR>}; <br><br>upload.prototype._removeNode = function (id) { <BR> var a=document.getElementById(id); <BR> a.parentNode.removeChild(a); <BR>}; <br><br>upload.prototype.remove = function (n) { <BR> /* <BR> *删除一个 file <BR> */ <BR> this._removeNode("upload_file_" +n); <BR> /* <BR> *删除一个 添加 <BR> */ <BR> this._removeNode("upload_add_" +n); <BR> /* <BR> *删除一个 删除 <BR> */ <BR> this._removeNode("upload_remove_" +n); <br><br> return this; <BR>} <BR></script>

五、OK,让我们运行一下这个控件:




<script> <BR>//这里是上面我们写的控件代码,这里由于篇幅,我就不再贴了 <BR></script>



<script> <BR>var o=new upload("uploadConainer"); <BR>o.add(); <BR></script>



6. Well, you have seen the effect, but it seems not ideal. All the added things are stuck together. It is necessary to beautify it.Where to start?There are many options here:
1. Add a line break

2. Add a container div for each upload
...etc.

We add it here A container, if you want to add something in the future, it will be better to add it. Modify add:

<script> <BR>upload.prototype.add = function () { <BR> /* <BR> *Generate a file <BR> */ <BR> var self = this; var cnt = this._cnt; <BR> var cWrap = document.createElement("div"); <BR> cWrap.id = "upload_wrap_" cnt; <BR> var cFile = document.createElement("input"); <BR> cFile.type="file"; cFile.name="upload"; <BR> cFile.id = "upload_file_" cnt; <BR> /* <BR> *Generate an add<BR> */ <BR> var cAdd = document.createElement("span"); <BR> cAdd.innerHTML="Add"; <BR> cAdd.onclick = function ( ) { <BR> self.add(); <BR> }; <BR> /* <BR> *Generate a delete<BR> */ <BR> var cRemove = document.createElement("span"); <BR> cRemove.innerHTML="Delete"; <BR> cRemove.onclick = function () { <BR> self.remove(cnt); <BR> }; <br><br> cAdd.id = "upload_add_" cnt; <BR> cRemove.id = "upload_remove_" cnt; <br><br> /* Add all generated information to the container */ <BR> cWrap.appendChild(cFile); <BR> cWrap.appendChild(cAdd) ; <BR> cWrap.appendChild(cRemove); <BR> this.target.appendChild(cWrap); <br><br> /* Counter 1 */ <BR> this._cnt ; <br><br> return this ; //Return to <BR>}; <BR></script>

7. Add CSS to beautify it. The final code is as follows:

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


upload control - http://www.never-online.net


 
 
    

 batch upload control with javascript 


    

    
tutorial of DHTML and javascript programming, Power By never-online.net

 

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment