效果DEMO:
http://www.never-online.net/tutorial/js/upload/
Javascript & DHTML 实例编程(教程)(三),初级实例篇—上传文件控件实例
上章基本上把要交代的基本知识都说了一些,今天终于开始写代码了:D
首先来做一个实例,批量上传的UI控件。以后一般做的示例也是以UI控件为主的。都是封装成Object或者用Function封装成"Class"类。
也许对于单单看前几章的朋友来说这个例子过于深奥了,但是不用担心,一步步来解释应该很快理解的,关键是理解怎么做,而不是怎么写。
如果还有不懂的朋友,可以留言给我。
首先看一个成品截图预览:
一、接下来我们先说思路,首先定义一个upload"类",
一)、这个类的公共访问信息应该有:
1、构造函数中要传递一些必要的参数,比如,在哪个容器构造upload的信息。
2、必须有一个add()方法,用于添加一个upload
3、必须有一个remove()方法,用于删除一个upload
二)、这个类中应该有一些必要的信息,是生成实例本身所具有的信息,(upload对象的一些信息)。
1、得到一共多少个upload信息,
2、一个容器对象,这个对象也是从构造函数中传递。
整个图可以简单的表示为
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>< ;/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>
<script> <BR>var o=new upload("uploadConainer") <BR></script>
6. 효과를 보셨지만, 추가한 것들이 다 붙어서 아름답게 보이진 않네요.어디서부터 시작해야 할까요?여기에는 다양한 옵션이 있습니다.
1. 줄바꿈 추가
2. 업로드할 때마다 컨테이너 div를 추가합니다.
여기에 추가합니다. , 나중에 추가할 내용이 있으면 추가하는 것이 좋습니다. 수정 추가:
<script> <br>upload.prototype.add = function () { <BR> /* <BR> *파일 생성 <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> *추가 생성<BR> */ <BR> var cAdd = document.createElement("span") <BR> cAdd.innerHTML="Add" <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> cWrap.appendChild(cFile) <BR> cWrap.appendChild(cAdd) ; <BR> cWrap.appendChild(cRemove); <BR> this.target.appendChild(cWrap); <BR><br> /* 카운터 1 */ <br> this._cnt <BR><br> ; // <br></script>
로 돌아갑니다. 7. CSS를 추가하여 아름답게 만듭니다.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> xmlns=" http://www.w3.org/1999/xhtml">
업로드 제어 - http://www.never-online.net title>