2011년 5월 23일 월요일

HTML5 - code example of File API - drag & drop hard drive files to a webpage!

원본문서: HTML5 - code example of File API - drag & drop hard drive files to a webpage!


Local에 있는 이미지 파일을 D&D해거나 찾아 넣기 했을 경우 Thumbnail 이미지를 보여주는 HTM5 code example이다.
HTML5는 Firefox 3.5 이상에서만 완벽하게 돌아갑니다. - Google Crhome 이나 MS IE8에서는 안됩니다. -

테스트는 원본문서에서 할수 있습니다. - Sample을 이글에 넣어볼려고 했는데 안되는 군요. -
또, 하단에 Sample Code가 링크 되어 있습니다.

File API가 구현된 해심 Method

function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join('');
document.getElementById('thumbs').insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}

function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}

아래는 ondrop Event 발생 지점 입니다.
<td align="left" height="105" ondragenter="return false" ondragover="return false" ondrop="dropIt(event)">
<output id="thumbs"></output>
</td>

Image을 선택하여 D&D했을 경우 ondrop 이벤트가 발생하고 dropit - > imagesSelected에서 thumbmail Image가 포함된 HTML을 만들어
<output> 객체 안에 첨가되는 방식이군요.



You can download the complete HTML of this example by clicking here.

댓글 없음:

댓글 쓰기

시스템 부팅시 도커 컨테이너 자동 실행

Docker 컨테이너를 운용중인 시스템이 Reboot 되버리면 컨테이너가 자동으로 올라오지 않아 불편해서 시스템 리붓시 컨테이너를 자동으로 시작되게 init 데몬에 등록하기로 했습니다. 서버는 Ubuntu 17.10 Docker는 17.0...