[질문] javascript 파일 크기 알아내기

cshong의 이미지

질문1)
다음과 같이 OpenBrowser 함수에서 alert(o.files.item(0).fileSize); 코드로 input 태그에서 선택된 파일크기를 알아 낼 수 있었습니다.
하지만 Firefox에서만 동작을 하더군요.
구글링을 해보니 ActiveX를 사용하는 방법은 있던데 순수 Javascript로 IE 환경에서 파일 크기를 알아 낼 수 있을까요?

질문2)
(input type="file") 이 코드를 Firefox에서 열었을 때 파일경로가 나오는 부분을 클릭하면 찾아보기를 클릭했을 때와 동일하게 파일브라우저가 나타납니다. 하지만 IE에서는 파일브라우저가 열리지 않고 이미 선택된 파일경로를 직접 수정을 할 수 있습니다.
여기서 제가 하고 싶은건 IE에서도 사용자가 임의로 수정할 수 없도록 파일브라우저가 열리게 하고 싶은 것입니다.
아래 OpenBrowser 함수에서 o.click(); 코드로 파일브라우저를 열 수 있었는데 (input id="samplefile" type="file" name="samplefile" /) 에서 파일경로가 표시되는 부분을 클릭했을 때는 동작이 않되네요.

나름 몇 일 구글링으로 찾아보았으나 원래 안되는 것인지 아니면 저와 같은 고민을 하신분이 없는건지 답이 나오지 않네요.
도움을 주시면 대단히 감사하겠습니다.

(!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd")
 
(html)
(head)
	(meta http-equiv="content-type" content="text/html; charset=utf-8" /)
	(title)(/title)
	(script type="text/javascript")
		function OpenBrowser()  {
			o = document.getElementById("samplefile");
//			o.click();
			alert(o.files.item(0).fileSize);
		}
	(/script)
(/head)
 
(body)
	(form name="myform" action="" method="post")
		(input id="samplefile" type="file" name="samplefile" /)
		(input type="button" value="열기" onclick="OpenBrowser();" /)
	(/form)
(/body)
(/html)
phonon의 이미지

http://forums.asp.net/t/1180804.aspx

위의 웹페이지의 가장 마지막 댓글을 참고해 보세요.

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

특별히 플래시를 쓰면 안되는 이유가 없다면 SWFUpload 같은 것을 쓰셔도 됩니다.
http://code.google.com/p/swfupload/

cshong의 이미지

http://forums.asp.net/t/1180804.aspx 이 곳을 가봤는데 ActiveX 사용을 하더군요.

그리고 Flash 사용 안됩니다.

Javascript 아니면 의미가 없습니다. ㅠ ㅠ

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

chadr의 이미지

제가 알고 있는 범위내에서 알려드리겠습니다.

1. 이건 보안상 안됩니다. 예전에 자바스크립트는 스크립트에서 로컬 파일에 접근이 가능했지만 보안상
막혔습니다. 파폭이나 익스에서 옵션을 통해서 조절이 가능하지만 그걸 자바스크립트를 이용하여 활성화
시키는 방법은 없습니다. 사용자가 직접 해야하지요. 즉 표준적이나 편법이나 가능한 방법은 없습니다.

2. 이것 또한 브라우저의 확장기능이므로 안되는 경우도 있습니다. 익스는 안되는걸로 압니다.

따라서 1번 기능은 로컬파일에 접근이 가능한 브라우저의 플러그인으로 처리를 하여 자바스크립트에 이를 이용하여
접근 하는 방법밖에 없습니다. 즉 익스라면 액티브엑스로 로컬파일을 접근 할 수 있도록 api를 만들고 자바스크립트에
이를 호출하여 접근 하는 방법이지요.
2번 기능은 브라우저 확장기능이라서 딱히 방법이 없을듯 합니다. 굳이 하실려면 직접 그러한 기능을 구현해야합니다.
일단 ui부분은 커스텀하게 만드시고 input type=file은 hidden으로 두시고 커스텀한 ui에서 열기를 누르면 그 이벤트가
o.click()을 호출하도록 하여 사용자가 선택한 파일이 커스텀 ui에만 보이도록 하는 것입니다. 이건 제가 안해봐서 될려나
모르겠네요..
-------------------------------------------------------------------------------
It's better to appear stupid and ask question than to be silent and remain stupid.

-------------------------------------------------------------------------------
It's better to appear stupid and ask question than to be silent and remain stupid.

cshong의 이미지

자바스크립트는 보안상 로컬 파일에 접근이 안된다고 저도 그렇게 알고 있었는데 Firefox에서는 되길래 IE에서도 방법이 있지 않나 했는데 역시나 그냥은 안 되는 것이 였나보네요.
그리고 IE에서 선택된 파일의 경로가 수정이 될 경우 오류를 미리 방지 하기 위해서 수정이 되지 않도록 할려고 했는데 이것 역시 좌절이군요. 감사합니다. =)

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

cshong의 이미지

시그널을 사용한다면 될 수도 있다고 얘기를 들었습니다.
제가 잘 몰라서 그러는데 시그널이란걸 사용하면 될까요?
그 시그널이란게 뭔지 찾아봐도 나오지도 않고 도무지 이해를 할 수 없네요.

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

chadr의 이미지

저도 시그널을 이용해서 된다는 말은 처음 들어봅니다. 어디서 보셨나요?
-------------------------------------------------------------------------------
It's better to appear stupid and ask question than to be silent and remain stupid.

-------------------------------------------------------------------------------
It's better to appear stupid and ask question than to be silent and remain stupid.

cshong의 이미지

어디서 본게 아니라 지인으로 부터 들었습니다.
확실히 된다가 아니라 될 수도 있다고 하네요..;;

추가) 그런데 javascript 에서 signal 을 사용할 수가 있는건가요?

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

cshong의 이미지

시그널에 대해서 이해를 하지 못해 헤매었는데 chadr님 OpenBrowser 함수에서 o.click(); 부분을 setTimeout("oclick()", 1); 이렇게 처리 하니 파일브라우저가 뜨는군요.

아~ 별 것 아니지만 하나 해결되어 너무 기쁩니다. 이제 IE에서도 파일크기만 알아내면 되는데 이건 안될라나..

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

================================
생각만 해서는 아무것도 이룰 수 없다.. 행동하라!!

댓글 달기

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.