Javascript 및 DHTML 업로드 파일 제어_javascript 기술

먼저 일괄 업로드 UI 제어 예시를 살펴보겠습니다. 앞으로 일반적으로 수행될 예제도 UI 컨트롤을 기반으로 합니다. 그것들은 모두 객체나 함수의 "클래스" 클래스로 캡슐화됩니다.

마지막 장에서는 설명할 기본 지식을 기본적으로 설명했고, 오늘 드디어 코드 작성을 시작했습니다 :D
먼저 일괄 업로드 UI 컨트롤을 예로 들어보겠습니다. 앞으로 일반적으로 수행될 예제도 UI 컨트롤을 기반으로 합니다. 그것들은 모두 객체나 함수의 "클래스" 클래스로 캡슐화됩니다.

이 예는 이전 장만 읽은 사람들에게는 너무 심오할 수도 있지만, 단계별로 설명하면 빠르게 이해할 수 있으므로 걱정하지 마세요. 어떻게 쓰는지는 아닙니다.
먼저 완성된 제품의 스크린샷 미리보기:

1. 다음으로 아이디어에 대해 이야기해 보겠습니다. 먼저 업로드 "클래스"를 정의합니다.

1). 이 클래스의 정보는 다음과 같아야 합니다.
1. 업로드 정보가 생성되는 컨테이너와 같은 일부 필수 매개변수는 생성자에 전달되어야 합니다.
2. 업로드를 추가하려면 add() 메소드가 있어야 합니다
3. 업로드를 삭제하려면 Remove() 메소드가 있어야 합니다

2). 생성된 인스턴스 자체가 가지고 있는 정보(업로드 객체의 일부 정보)
1. 총 몇 개의 업로드 정보를 얻나요?
2. 이 객체도 생성자에서 전달됩니다.

전체 그림은 간단히


로 표현하면 됩니다. 2. 어떤 지식을 사용해야 하는지, 어떤 지식은 익숙하고 어떤 지식은 알려지지 않았는지 생각해야 한다고 생각합니다.

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

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

3) 어떻습니까? 조직? 위 아이디어에는 이미 텍스트와 일러스트레이션이 있습니다

다음으로 작성을 시작해 보겠습니다:

1), 생성자, 기본 코드(의사 코드)

코드 복사 코드는 다음과 같습니다.

<script> <br>function upload(target/*container*/ > this._cnt = 0; /*Counter*/ <br> this.target = document.getElementById(target); <br>}; <br><br>upload.prototype.add = function () { <br> /* <br> *파일 생성 <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; = 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="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> 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 this; 🎜>}; <br></script>



3. 제거 메소드 구현 작성

코드 복사
코드는 다음과 같습니다.

<script> <span style="text-decoration:underline;">upload.prototype.remove = function (n) { </span> /* </p> *파일 삭제 <p class="codebody"> */ <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> */ <br> var a = document.getElementById( "upload_remove_ " n); <br> a.parentNode.removeChild(a); <br><br> 반환 <br>} <br><br><br><br><br>위의 제거 방법은 너무 반복적입니다. 코드를 더 짧고 유지 관리하기 쉽게 만들기 위해 제거 방법을 다시 단순화하는 것을 고려해 볼 수 있습니까? 여기서는 이 공통 기능을 기능에 넣습니다. 즉, 기능을 하나 더 추가합니다. <br><br><br></p>[모두 선택하려면 Ctrl A 참고: 외부 J를 도입해야 하는 경우 다음을 수행해야 합니다. 새로고침해서 실행]<p><br><br> 4. 코드를 합치면 기본적으로 완료됩니다 :D <br></p> <p class="htmlarea"><br>코드를 복사하세요</p> 코드는 다음과 같습니다.<p></p> <p class="codebody"><br><script> = document.getElementById(target); <br/>}; <br/><br/>upload.prototype.add = function () { <br/> /* <br/> *파일 생성 <br/> */ <br/> var self = this; var cnt = this._cnt; <br/> var cFile = document.createElement("input") <br/> cFile.type="file"; "upload"; <br/> cFile.id = "upload_file_" cnt; <br/> /* <br/> *추가 생성 <br/> */ <br/> var cAdd = document.createElement("span"); > cAdd.innerHTML="Add"; <br/> cAdd.onclick = function () { <br/> self.add() <br/> }; <br/> /* <br/> * 삭제 생성 / <br/> var cRemove = document.createElement("span"); <br/> cRemove.innerHTML="Delete"; <br/> cRemove.onclick = function () { <br/> self.remove(cnt); > }; <br/><br/> cAdd.id = "upload_add_" cnt; <br/> cRemove.id = "upload_remove_" cnt; <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; //Return <br/><br/>upload.prototype._removeNode = function(id) { <br/> var a=document.getElementById(id); 🎜> a.parentNode.removeChild (a); <br/>}; <br/><br/>upload.prototype.remove = function (n) { <br/> /* <br/> *파일 제거 <br/> */ <br/> this._removeNode( "upload_file_" n); <br/> /* <br/> *하나 추가 제거 <br/> */ <br/> this._removeNode("upload_add_" n) /* <br/> *하나 삭제 삭제 <br/> */ <br/> this._removeNode("upload_remove_" n) <br/><br/> return this <br/><br/><br/> <br/><br/><br/>5. 관련 HTML 코드를 추가하면 됩니다. <br/><br/><br/><br/>코드 복사<br/> 코드는 다음과 같습니다.<br/><br/> <br/><html> <br/><head> </script>

<script> <p>//여기에는 길이 때문에 더 이상 게시하지 않겠습니다. 🎜><body> <br><p id="uploadContainer"></p> <br><script> 🎜>o.add() <br></script>

6. 효과를 보셨지만 추가된 것들이 모두 뭉쳐져 있는 것 같습니다. 어디서부터 시작해야 할까요? 여기에는 다양한 옵션이 있습니다.

1. 개행 문자 추가2. 업로드할 때마다 컨테이너 p를 추가합니다.

여기에 추가합니다. . 앞으로 뭔가 추가하고 싶다면 수정 추가:

코드를 복사하세요
코드는 다음과 같습니다.

<script> <br>upload.prototype.add = function () { <br> /* <br> *파일 생성 <br> */ <br> var self = this; = this._cnt; <br> var cWrap = document.createElement("p"); <br> cWrap.id = "upload_wrap_" cnt <br> var cFile = document.createElement("input"); 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> var cRemove = document.createElement("span") <br> cRemove.innerHTML="delete" <br> cRemove.onclick = function () { <br> self.remove(cnt); <br><br> cAdd.id = "upload_add_" cnt; <br> cRemove.id = "upload_remove_" cnt; 생성된 모든 정보를 컨테이너에 추가합니다. */ <br> cWrap.appendChild(cFile); <br> cWrap.appendChild(cRemove) <br> this.target.appendChild( cWrap) ; <br><br> /* 카운터 1 */ <br> this._cnt <br><br> return this; <br></script> >



7. CSS를 추가하여 아름답게 만들어줍니다.