집 > 기사 > 웹 프론트엔드 > Javascript 및 DHTML 예제 프로그래밍(튜토리얼)(3) 기본 예제 1 - 파일 제어 업로드 예제_기본 지식

Javascript 및 DHTML 예제 프로그래밍(튜토리얼)(3) 기본 예제 1 - 파일 제어 업로드 예제_기본 지식

WBOY원래의: 2016-05-16 19:12:461030검색

效果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. 어떤 지식을 사용해야 하는지, 어떤 지식은 익숙하고 어떤 지식은 알려지지 않았는지 생각해야 한다고 생각합니다.

1) 위의 미리보기에서 볼 수 있듯이 세 개 이상의 새로운 컨트롤이 필요합니다. (추가, 삭제, 파일 컨트롤이 있을 수도 있고, 또 있을 수도 있지만...적어도 눈으로 볼 수 있는 정도는 됩니다.) 새로운 정보이므로 document.createElement를 사용할 수도 있고 추가해야 합니다. object.appendChild(obj) 또는 obj.insertBefore() 메서드를 컨테이너에서 사용할 수 있습니다. 삭제는 obj.parentNode.removeChild(obj)입니다. 이 모든 것은 이전 장에서 언급되었습니다.

2) 컨트롤이기 때문에 함수나 객체로 캡슐화해야 합니다. 이 부분은 1장에서 간략하게 설명했습니다.

3) 어떻습니까? 조직? 위 아이디어에는 이미 텍스트와 그림이 있습니다

다음으로 작성을 시작해 보겠습니다.
1) 생성자, 기본 코드(의사 코드)

<script> 🎜>함수 업로드(대상/*컨테이너*/ <br> ) target); <br>} <br><br>upload.prototype.add = function () { <br> /* <br> * file <br> * 추가 생성 <br> * 삭제 생성 <br> *카운터 1 <br> */ <br>} <br><br>upload.prototype.remove = function () { <br> /* <br> *파일 삭제 <br> *추가 추가 <br> *삭제 삭제 <br> */ <br>} <br></script>

2. 쓰기 add 메소드 구현

<script> <br>upload.prototype.add = function () { <br> /* <br> *파일 생성 <br> */ <br> var self = this; var cnt = this._cnt; <br> var cFile = document.createElement("input") <br> cFile.name="upload"; id = "upload_file_" cnt; <br> /* <br> * 추가 생성<br> */ <br> var cAdd = document.createElement("span") <br> cAdd.innerHTML="Add"; <br> cAdd.onclick = function () { <br> self.add(); <br> /* <br> *삭제 생성<br> */ <br> var cRemove = document. createElement("span"); <br> cRemove.innerHTML="삭제 "; <br> cRemove.onclick = function () { <br> self.remove(cnt) <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; //return <br>}; <br>&lt ;/script> <br><br>3. <br><br><script><BR>upload.prototype의 구현을 작성합니다. Remove = function (n) { <br> /* <br> *파일 삭제 <BR> */ <BR> var a = document.getElementById("upload_file_" n) <br> a.parentNode.removeChild(a ); <br> /* <br> *추가 삭제<br> */ <BR> var a = document.getElementById("upload_add_" n) <BR> a.parentNode.removeChild(a); /* <BR> *한 개 삭제 삭제 <BR> */ <BR> var a = document.getElementById("upload_remove_" n) <BR> a.parentNode.removeChild(a) <BR><BR> return this ; <BR>} <BR></script>

위의 제거 방법은 너무 반복적입니다. 코드를 더 짧고 유지하기 쉽게 만들기 위해 제거 방법을 다시 단순화하는 것을 고려해 볼 수 있습니까?在这里，我们把这个通用功能放到一个函数里，也就是多加一个函数：

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