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

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

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



<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> <BR> <style type="text/css" media="all" title="Default"> <BR> * { 글꼴-가족:Arial } <BR> 본문 { 글꼴 크기:10pt; } <BR> h1 { } <BR> #footer { 글꼴 크기:9pt; 여백:20px } <BR> 범위 { 여백: 3px; 커서:기본값; style> <BR> <script type="text/javascript"> <BR> //<![CDATA[ <BR><BR> function upload(target) { <BR> this._cnt = 0; 🎜> this .target = document.getElementById(target); <BR><br> upload.prototype.add = function() { <br><BR> var self = this; _cnt; <BR> var cWrap = document.createElement("div"); <BR> cWrap.id = "upload_wrap_" cnt <br> var cFile = document.createElement("input"); ="file"; cFile.name="upload"; <br> cFile.id = "upload_file_" cnt; <br><br> var cAdd = document.createElement("span") <BR> cAdd.innerHTML= "추가" ; <BR> cAdd.onclick = function () { <BR> self.add(); <BR><BR> var cRemove = document.createElement("span"); cRemove.inner HTML ="삭제"; <br> cRemove.onclick = function () { <br> self.remove(cnt) <BR> }; <br><br>      cAdd.id = "upload_add_"  cnt; <BR>      cRemove.id = "upload_remove_"  cnt; <br><br>      cWrap.appendChild(cFile); <BR>      cWrap.appendChild(cAdd); <BR>      cWrap.appendChild(cRemove); <BR>      this.target.appendChild(cWrap); <BR>      this._cnt ; <br><br>      이것을 반환하세요. <BR>    }; <br><br>    upload.prototype._removeNode = 함수(id) { <BR>      var a=document.getElementById(id); <BR>      a.parentNode.removeChild(a); <BR>    }; <br><br>    upload.prototype.remove = function (n) { <BR>      this._removeNode("upload_file_"  n); <BR>      this._removeNode("upload_add_"  n); <BR>      this._removeNode("upload_remove_"  n); <BR>      이것을 반환하세요. <BR>    }; <br><br>    onload = function () { <BR>      var o = new upload("컨테이너"); <BR>      o.add(); <BR>    }; <BR> //]]> <BR> </script> <BR> </head> <BR> <body id="www.never-online.net"> <BR>    <h1> 자바스크립트를 사용한 일괄 업로드 제어</h1> <BR>    <div id="container"></div> <BR>    <div id="footer">DHTML 및 자바스크립트 프로그래밍 튜토리얼, Power By Never-online.net</div> <BR> </body> <BR></html> <BR></script></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명:</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사:<a class="dBlack" title="javascript_time 및 date의 지연 실행 또는 반복 실행을 구현하는 두 가지 함수" href="http://m.php.cn/ko/faq/25939.html">javascript_time 및 date의 지연 실행 또는 반복 실행을 구현하는 두 가지 함수</a></span><span>다음 기사:<a class="dBlack" title="javascript_time 및 date의 지연 실행 또는 반복 실행을 구현하는 두 가지 함수" href="http://m.php.cn/ko/faq/25941.html">javascript_time 및 date의 지연 실행 또는 반복 실행을 구현하는 두 가지 함수</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="http://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!</p></div><div class="footermid"><a href="http://m.php.cn/ko/about/us.html">회사 소개</a><a href="http://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="http://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>