환영합니다. 바다아이 홈페이지 입니다.

'검찰공화국, 부패공화국... 윤석열은 내려와라... 그리고 수사 받아라... 당신은 대통령을 할 자격이 없다.'

이번주 로또 및 연금번호 발생!! |

HOME |

여기는? |

바다물때표 |

알림 (16) |

여러가지 팁 (1059) |

추천 및 재미 (156) |

자료실 (22) |

시사, 이슈, 칼럼, 평론, 비평 (613) |

끄적거림 (136) |

문예 창작 (716) |

바람 따라 (75) |

시나리오 (760) |

드라마 대본 (248) |

살인!

리눅스 데스크탑 (230)
리눅스 서버 (148)
윈도우 관련 (8)
freebsd 데스크탑 (31)
freebsd 서버 (34)
쉘 스크립트 (6)
html/css/xml (48)
html5 (4)
golang (179)
php (2)
디자인 관련 (1)
javascript/jquery (76)
DATABASE (9)
mariadb, mysql (33)
postgresql (45)
생활/쇼핑 (39)
컴퓨터/핸드폰 (45)
종교/자선 (3)
요리관련 (22)
음식관련 (15)
의학관련 (8)
건강/운동 관련 (13)
주식, 금융관련 (3)
자동차, 운전 관련 (21)
기계 관련 (9)
스포츠 관련 (1)
과학, 수학관련 (1)
문학관련 (8)
좋은 글 (7)
낚시관련 (1)
원예관련 (9)

현재 접속자

바다아이에게 후원하기

개정 공동번역 성경보기

기존 공동번역 성경보기

소스 하이라이팅

도로명 주소검색

URL encode, decode

javascript 줄 맞추기

Hits :

html5

html5 - html5 file api 다중 파일 선택 , 멀티 업로드

이 름 : 바다아이 | 조회수 : 9916

Google Code style (c) Aahan Krish <geekpanth3r@gmail.com>

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: white;
  color: black;
}

.hljs-comment,
.hljs-quote {
  color: #800;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-section,
.hljs-title,
.hljs-name {
  color: #008;
}

.hljs-variable,
.hljs-template-variable {
  color: #660;
}

.hljs-string,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-regexp {
  color: #080;
}

.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-meta,
.hljs-number,
.hljs-link {
  color: #066;
}

.hljs-title,
.hljs-doctag,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
  color: #606;
}

.hljs-attribute,
.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9B703F
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
 font-style: italic;
}
</style>
<pre>
<code class="hljs">오래된 브라우저에서는 안됩니다. 요즘은 거의 최신이니까.... 크게 상관은 없겠네요...
자바스크립트 위치에 따라 작동 안될 수도 있습니다.
꼭 속성들 다음에 위치시켜주세요...
이래저래 안된다 싶으면 onchange 부분은 input 부분에 직접 써 넣으시는 방법도 시도해 보세요..
웬만하면 다 될거라 생각됩니다.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;File API Demo&lt;/title&gt;
 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
 
 &lt;h1&gt;File API Demo&lt;/h1&gt;
 &lt;h3&gt;파일(들)을 선택하세요.&lt;/h3&gt;
 &lt;!-- multiple 속성을 이용하면 파일을 다중으로 업로드 할 수 있음 --&gt;
 &lt;input id=&quot;files-upload&quot; type=&quot;file&quot; multiple&gt;
 
 &lt;h3&gt;Uploaded files&lt;/h3&gt;
 &lt;ul id=&quot;file-list&quot;&gt;
 &lt;li class=&quot;no-items&quot;&gt;(파일이 선택되 않음)&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;script&gt;
 var filesUpload = document.getElementById(&quot;files-upload&quot;),
 fileList = document.getElementById(&quot;file-list&quot;);
 
 function traverseFiles (files) {
 var li,
 file,
 fileInfo;
 fileList.innerHTML = &quot;&quot;;
 
 for (var i=0, il=files.length; i&lt;il; i++) {
 li = document.createElement(&quot;li&quot;);
 file = files[i];
 fileInfo = &quot;&lt;div&gt;&lt;strong&gt;Name:&lt;/strong&gt; &quot; + file.name + &quot;&lt;/div&gt;&quot;;
 fileInfo += &quot;&lt;div&gt;&lt;strong&gt;Size:&lt;/strong&gt; &quot; + file.size + &quot; bytes&lt;/div&gt;&quot;;
 fileInfo += &quot;&lt;div&gt;&lt;strong&gt;Type:&lt;/strong&gt; &quot; + file.type + &quot;&lt;/div&gt;&quot;;
 li.innerHTML = fileInfo;
 fileList.appendChild(li);
 };
 };
 
 filesUpload.onchange = function () {
 traverseFiles(this.files);
 };
 &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

출처 : http://chongmoa.com/3022</code></pre>

짧은 주소 : https://www.bada-ie.com/su/?421591802259

오래된 브라우저에서는 안됩니다. 요즘은 거의 최신이니까.... 크게 상관은 없겠네요...
자바스크립트 위치에 따라 작동 안될 수도 있습니다.
꼭 속성들 다음에 위치시켜주세요...
이래저래 안된다 싶으면 onchange 부분은 input 부분에 직접 써 넣으시는 방법도 시도해 보세요..
웬만하면 다 될거라 생각됩니다.

 
<!DOCTYPE html>
<html>
<head>
  <title>File API Demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
 
  <h1>File API Demo</h1>
  <h3>파일(들)을 선택하세요.</h3>
  <!-- multiple 속성을 이용하면 파일을 다중으로 업로드 할 수 있음 -->
  <input id="files-upload" type="file" multiple>
   
  <h3>Uploaded files</h3>
  <ul id="file-list">
    <li class="no-items">(파일이 선택되 않음)</li>
  </ul>
 
  <script>
    var filesUpload = document.getElementById("files-upload"),
        fileList = document.getElementById("file-list");
     
    function traverseFiles (files) {
      var li,
          file,
          fileInfo;
      fileList.innerHTML = "";
         
      for (var i=0, il=files.length; i<il; i++) {
        li = document.createElement("li");
        file = files[i];
        fileInfo = "<div><strong>Name:</strong> " + file.name + "</div>";
        fileInfo += "<div><strong>Size:</strong> " + file.size + " bytes</div>";
        fileInfo += "<div><strong>Type:</strong> " + file.type + "</div>";
        li.innerHTML = fileInfo;
        fileList.appendChild(li);
      };
    };
     
    filesUpload.onchange = function () {
      traverseFiles(this.files);
    };
  </script>
</body>
</html>


출처 : http://chongmoa.com/3022

1 page / 1 page
번 호	카테고리	제 목	이름	조회수
4	html5	[HTML5 튜토리얼] Video와 Audio 태그 기본	바다아이	11793
3	html5	html5 다중 멀티 파일 업로드, 폴더 선택, 폴더까지 이름에 포함.	바다아이	11589
2	html5	html5 simple, 단순한 color picker 색깔, 색상 선택.	바다아이	13615
현재글	html5	html5 file api 다중 파일 선택 , 멀티 업로드	바다아이	9917
1
\| \|

Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL + Mariadb ]
서버위치 : 오라클 클라우드 춘천 실행시간 : 0.06454 초
to webmaster... gogo sea. gogo sea.