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.

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...