1)
이미지 관련작업을 하다보니, 여러개 이미지를 써야할 경우가 생기더라구요.
그런데, 그런 작업을 브라우져 페이지상에서 해보려는 시도의 첫번째, DropFile 입니다.
*주의*
IE8 에서 작동이 안되는 것은 조금 슬프지만..
제가 하고싶은 작업은 canvas 에서 이미지를 가공하는 거라서요..
*원 출처?* http://jsfiddle.net/JtJ5N/
(검색으로 찾아내본 거라, 정확한지는 조금 애매하네요..)
..
2)
<style>
#drop131029_1 {
min-height: 150px;
width: 250px;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
</style>
<h1 align=center>A File Preview Demo</h1>
<DIV id="status131029_1">Drag the files from a folder to a selected area ...</DIV>
<DIV id="drop131029_1">Drop files here.</DIV>
<DIV id="list131029_1"></DIV>
<script type="text/javascript">
// 출처는 아마도 http://jsfiddle.net/JtJ5N/
// 개조를 하긴 했는데.. 그냥 그래요..
(function () {
function g(b, a, d) {
if (b[p]) b[p](a, d, !1);
else if (b[q]) b[q]("on" + a, d);
else b["on" + a] = d
}
var p = "addEventListener",
q = "attachEvent",
k = "preventDefault",
h = window,
n = document,
e;
Function.prototype.bindToEventHandler = function () {
var b = this,
a = Array.prototype.slice.call(arguments);
return function (d) {
d = d || h.event;
a.unshift(d);
b.apply(this, a)
}
};
String.prototype.r = function () {
var b = arguments,
a = b.length,
d = this,
c;
for (c = 0; c < a; c += 2) d = d.replace(b[c], b[c + 1]);
return d
};
e = function (b) {
return n.getElementById(b)
};
var r, l, m;
h.FileReader ? g(h, "load", function () {
function b(a) {
if (a[k]) a[k]();
return !1
}
r = e("status131029_1");
l = e("drop131029_1");
m = e("list131029_1");
g(l, "dragover", b);
g(l, "dragenter", b);
g(l, "drop", function (a) {
a = a || h.event;
if (a[k]) a[k]();
var b = a.dataTransfer.files;
for (a = 0; a < b.length; a++) {
var c = b[a],
e = new h.FileReader;
g(e, "loadend", function (a, c) {
var e = this.result,
f = n.createElement("div");
f.innerHTML = "Loaded : {filename} size {filesize} B".r(/{filename}/, c.name, /{filesize}/, c.size);
m.appendChild(f);
f = m.getElementsByTagName("div").length;
r.innerHTML = f < b.length ? "Loaded 100% of file {fileNumber} of {fileslength}...".r(/{fileNumber}/, f, /{fileslength}/, b.length) : "Done loading. processed {fileNumber} files.".r(/{fileNumber}/, f);
f = n.createElement("img");
f.file = c;
f.src = e;
m.appendChild(f)
}.bindToEventHandler(c));
e.readAsDataURL(c)
}
return !1
})
}) : e("status131029_1").innerHTML = "Your browser does not support the HTML5 FileReader."
})();
</script>
-- 새 창에 샘플 띄우기.. --
3)
..
4)
파일탐색기..등에서 파일(들)을 "Drop file here" 라고 써있는 사각형 안으로 드롭하면,
해당 파일의 크기와 이름..등을 표시하는 겁니다.
*주의* 모바일에서는 사각형 표시가 안될거라 생각됩니다. <style 태그가 생략되서요..
*추가* 모바일에서도 표시는 되네요..
HTML5 에서 고시하고 있는, window.FileRead 항목이 필요하죠.
그 후에, dropover, dropenter, drop 세가지 항목의 이벤트중 두개는 임시(?)로 받아놓고,
drop 작업이 시작되는 이벤트를 받아, 시작하도록 되어있죠.
순서를 그리자면,
파일탐색기 ( 파일(들) 선택 -> 드래그 )
-> 웹브라우져 drop div ( ondrop -> event.dataTransfer.files ) // 여기까지가 drop
-> [] -> " window.FileReader " ( onloadend -> this.result ) // 여기는 FileRead
-> 결과 출력..
요렇겠네요.
나중에 dropover 나 dropenter 에 대해서 조금 더 공부해봐야할 것도 같습니다.
5)
블로그용 내용으로 바꾸느라(?) 조금 애먹은게요,
개인적으로는, 출력하는 내용을 규격화(?)하느라 그랬지만, (덧셈 대신 replace 를 쓰려고.. -.-..)
원본에서는 .js 파일을 불러서 쓰는거라,
<html onload= 이벤트는 메인페이지가 먼저 불러져있으니 감지(?)되어 쓸 수 있는 거였죠.
하지만, one page 상에 표시해야(?)하는 저로써는
그런 방법은 쓸 수 없어서,
onload 가 일어나지 않던 부분을 추적해서 적용하도록 했습니다.
(그 외에, list, status, drop ..등의 공용형태 아이디도 수정..)
..
wantHate killofki@.
이미지 관련작업을 하다보니, 여러개 이미지를 써야할 경우가 생기더라구요.
그런데, 그런 작업을 브라우져 페이지상에서 해보려는 시도의 첫번째, DropFile 입니다.
*주의*
IE8 에서 작동이 안되는 것은 조금 슬프지만..
제가 하고싶은 작업은 canvas 에서 이미지를 가공하는 거라서요..
*원 출처?* http://jsfiddle.net/JtJ5N/
(검색으로 찾아내본 거라, 정확한지는 조금 애매하네요..)
..
2)
<style>
#drop131029_1 {
min-height: 150px;
width: 250px;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
</style>
<h1 align=center>A File Preview Demo</h1>
<DIV id="status131029_1">Drag the files from a folder to a selected area ...</DIV>
<DIV id="drop131029_1">Drop files here.</DIV>
<DIV id="list131029_1"></DIV>
<script type="text/javascript">
// 출처는 아마도 http://jsfiddle.net/JtJ5N/
// 개조를 하긴 했는데.. 그냥 그래요..
(function () {
function g(b, a, d) {
if (b[p]) b[p](a, d, !1);
else if (b[q]) b[q]("on" + a, d);
else b["on" + a] = d
}
var p = "addEventListener",
q = "attachEvent",
k = "preventDefault",
h = window,
n = document,
e;
Function.prototype.bindToEventHandler = function () {
var b = this,
a = Array.prototype.slice.call(arguments);
return function (d) {
d = d || h.event;
a.unshift(d);
b.apply(this, a)
}
};
String.prototype.r = function () {
var b = arguments,
a = b.length,
d = this,
c;
for (c = 0; c < a; c += 2) d = d.replace(b[c], b[c + 1]);
return d
};
e = function (b) {
return n.getElementById(b)
};
var r, l, m;
h.FileReader ? g(h, "load", function () {
function b(a) {
if (a[k]) a[k]();
return !1
}
r = e("status131029_1");
l = e("drop131029_1");
m = e("list131029_1");
g(l, "dragover", b);
g(l, "dragenter", b);
g(l, "drop", function (a) {
a = a || h.event;
if (a[k]) a[k]();
var b = a.dataTransfer.files;
for (a = 0; a < b.length; a++) {
var c = b[a],
e = new h.FileReader;
g(e, "loadend", function (a, c) {
var e = this.result,
f = n.createElement("div");
f.innerHTML = "Loaded : {filename} size {filesize} B".r(/{filename}/, c.name, /{filesize}/, c.size);
m.appendChild(f);
f = m.getElementsByTagName("div").length;
r.innerHTML = f < b.length ? "Loaded 100% of file {fileNumber} of {fileslength}...".r(/{fileNumber}/, f, /{fileslength}/, b.length) : "Done loading. processed {fileNumber} files.".r(/{fileNumber}/, f);
f = n.createElement("img");
f.file = c;
f.src = e;
m.appendChild(f)
}.bindToEventHandler(c));
e.readAsDataURL(c)
}
return !1
})
}) : e("status131029_1").innerHTML = "Your browser does not support the HTML5 FileReader."
})();
</script>
3)
A File Preview Demo
Drag the files from a folder to a selected area ...
Drop files here.
..
4)
파일탐색기..등에서 파일(들)을 "Drop file here" 라고 써있는 사각형 안으로 드롭하면,
해당 파일의 크기와 이름..등을 표시하는 겁니다.
*추가* 모바일에서도 표시는 되네요..
HTML5 에서 고시하고 있는, window.FileRead 항목이 필요하죠.
그 후에, dropover, dropenter, drop 세가지 항목의 이벤트중 두개는 임시(?)로 받아놓고,
drop 작업이 시작되는 이벤트를 받아, 시작하도록 되어있죠.
순서를 그리자면,
파일탐색기 ( 파일(들) 선택 -> 드래그 )
-> 웹브라우져 drop div ( ondrop -> event.dataTransfer.files ) // 여기까지가 drop
-> [] -> " window.FileReader " ( onloadend -> this.result ) // 여기는 FileRead
-> 결과 출력..
요렇겠네요.
나중에 dropover 나 dropenter 에 대해서 조금 더 공부해봐야할 것도 같습니다.
5)
블로그용 내용으로 바꾸느라(?) 조금 애먹은게요,
개인적으로는, 출력하는 내용을 규격화(?)하느라 그랬지만, (덧셈 대신 replace 를 쓰려고.. -.-..)
원본에서는 .js 파일을 불러서 쓰는거라,
<html onload= 이벤트는 메인페이지가 먼저 불러져있으니 감지(?)되어 쓸 수 있는 거였죠.
하지만, one page 상에 표시해야(?)하는 저로써는
그런 방법은 쓸 수 없어서,
onload 가 일어나지 않던 부분을 추적해서 적용하도록 했습니다.
(그 외에, list, status, drop ..등의 공용형태 아이디도 수정..)
..
wantHate killofki@.
'event' 카테고리의 다른 글
| IE8] 싸이월드 공감아이콘을 공감버튼으로 바꿔봅니다. (0) | 2013.11.14 |
|---|---|
| window.event] 이벤트가 받아내는 값을 봅니다.. (0) | 2013.09.16 |
| 풍뎅이뎅이]..의 휴재편을 이용해서 스크롤 애니메니션을 만들어봤습니다만.. (1) | 2012.12.06 |
| selection] 선택 범위 해제에 관련해서.. (0) | 2012.04.04 |
| scrollBar] 스크롤 드래그를 감지해보고 싶었습니다. (0) | 2012.04.04 |
