jQuery 링크에 걸린 파일 사이즈 자동으로 알아내기
Scripter/jQuery / 2008. 9. 3. 11:08
오늘자 ajaxian에 올라온 포스트 중에 jQuery Tip으로 링크에 걸린 파일사이즈를 자동으로 알아낸뒤 링크뒤에 출력해주는 포스팅을 번역해서 올려본다.
이미 올려져 있는 소스의 파일사이즈를 알아내 오는것으로 파일업로드시 파일사이즈 체크는 달리 해야 한다.
jQuery(function($){
$('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
// looking at the href of the link, if it contains .pdf or .doc or .mp3
var link = $(this);
var bits = this.href.split('.');
var type = bits[bits.length -1];
var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
// then call the json thing and insert the size back into the link text
$.getJSON(url, function(json){
if(json.ok && json.headers['Content-Length']) {
var length = parseInt(json.headers['Content-Length'], 10);
// divide the length into its largest unit
var units = [
[1024 * 1024 * 1024, 'GB'],
[1024 * 1024, 'MB'],
[1024, 'KB'],
[1, 'bytes']
];
for(var i = 0; i <units.length; i++){
var unitSize = units[i][0];
var unitText = units[i][1];
if (length>= unitSize) {
length = length / unitSize;
// 1 decimal place
length = Math.ceil(length * 10) / 10;
var lengthUnits = unitText;
break;
}
}
// insert the text directly after the link and add a class to the link
link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
link.addClass(type);
}
});
});
});
$('a[href$=".pdf"], a[href$=".doc"], a[href$=".mp3"], a[href$=".m4u"]').each(function(){
// looking at the href of the link, if it contains .pdf or .doc or .mp3
var link = $(this);
var bits = this.href.split('.');
var type = bits[bits.length -1];
var url= "http://json-head.appspot.com/?url="+encodeURI($(this).attr('href'))+"&callback=?";
// then call the json thing and insert the size back into the link text
$.getJSON(url, function(json){
if(json.ok && json.headers['Content-Length']) {
var length = parseInt(json.headers['Content-Length'], 10);
// divide the length into its largest unit
var units = [
[1024 * 1024 * 1024, 'GB'],
[1024 * 1024, 'MB'],
[1024, 'KB'],
[1, 'bytes']
];
for(var i = 0; i <units.length; i++){
var unitSize = units[i][0];
var unitText = units[i][1];
if (length>= unitSize) {
length = length / unitSize;
// 1 decimal place
length = Math.ceil(length * 10) / 10;
var lengthUnits = unitText;
break;
}
}
// insert the text directly after the link and add a class to the link
link.after(' (' + type + ' ' + length + ' ' + lengthUnits + ')');
link.addClass(type);
}
});
});
});
소스에서 굵게 표시된 json.headers 를 이용해서 컨텐츠의 사이즈를 알아온뒤 link.after메쏘드로 화면에 출력해 주었다...
너무도 간단하게.. ㅡ.,ㅡ;
invalid-file샘플사이트 : http://natbat.net/code/clientside/js/addSizes/
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>addSizes</title>
<!-- Date: 2008-07-29 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="addSizes.js" type="text/javascript"></script>
</head>
<body>
<h1>addSizes</h1>
<p>This is a link to a remote <a href="http://clearleft.com/worksheet/client-worksheet.doc">doc</a> file.</p>
<p>This is a link to a remote <a href="http://www.onyx.com/pdf/CustomerMgmtBrochure.pdf">pdf</a> file.</p>
<p>This is a link to a remote <a href="http://media.giantbomb.com/podcast/giantbombcast-071708.mp3">mp3</a> file.</p>
<p>This is a link to a local <a href="media/test.doc">doc</a> file.</p>
<p>This is a link to a remote <a href="media/test.pdf">pdf</a> file.</p>
<p>This is a link to a remote <a href="media/test.mp3">mp3</a> file.</p>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>addSizes</title>
<!-- Date: 2008-07-29 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="addSizes.js" type="text/javascript"></script>
</head>
<body>
<h1>addSizes</h1>
<p>This is a link to a remote <a href="http://clearleft.com/worksheet/client-worksheet.doc">doc</a> file.</p>
<p>This is a link to a remote <a href="http://www.onyx.com/pdf/CustomerMgmtBrochure.pdf">pdf</a> file.</p>
<p>This is a link to a remote <a href="http://media.giantbomb.com/podcast/giantbombcast-071708.mp3">mp3</a> file.</p>
<p>This is a link to a local <a href="media/test.doc">doc</a> file.</p>
<p>This is a link to a remote <a href="media/test.pdf">pdf</a> file.</p>
<p>This is a link to a remote <a href="media/test.mp3">mp3</a> file.</p>
</body>
</html>
[ 다른 방법 : jQuery와 같이 3-party library를 사용하지 않고 단순 xhr을 이용한 방법 ]
function filesize (url) {
var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
if (!req) throw new Error('XMLHttpRequest not supported');
req.open ('HEAD', url, false);
req.send (null);
if (!req.getResponseHeader) {
try {
throw new Error('No getResponseHeader!');
} catch(e){
return false;
}
} else if (!req.getResponseHeader('Content-Length')) {
try {
throw new Error('No Content-Length!');
} catch(e){
return false;
}
} else {
return req.getResponseHeader('Content-Length');
}
}
사용법 : filesize('파일주소');
테스트샘플
<html>
<head><title>테스트</title></head>
<body>
<script type="text/javascript">
function filesize (url) {
var req = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
if (!req) throw new Error('XMLHttpRequest not supported');
req.open ('HEAD', url, false);
req.send (null);
alert("전체 헤더======================\n\n"+req.getAllResponseHeaders());
try{
if(!req.getResponseHeader('Content-Length')) alert(req.getResponseHeader('Content-Length') + 'bytes');
}catch(e){
alert("에러");
}
}
</script>
<button onclick="filesize('https://t1.daumcdn.net/cfile/tistory/190E4E1249F6B2D7E2');" >이미지 파일사이즈</button><br />
<button onclick="filesize('http://techbug.tistory.com/122');" >웹페이지 파일사이즈(Entity header가 없는경우)</button><br />
<button onclick="filesize('http://www.webmasterworld.com/forum91/1920.htm');" >웹페이지 파일사이즈(Entity header가 있는경우)</button><br />
</body>
</html>
이경우 맨위의 버튼은 이미지 파일사이즈를 가져오는 것이라 content-Length가 표시되지만 아래의 경우 text/html의 content-length가 되지 않아 사이즈를 정할수 없다.
보통 HTTP header의 경우 (특히 Entity-Header)의 경우는 request를 보내는 브라우저의 종류에 따라 보내주는 정보가 틀려서 content-length를 구하는 방법이 어렵다.
위에서 보는 바와 같이 똑같이 웹페이지 파일사이즈를 정하는데 text/html일 경우 Fiddler나 다른 HTTP Header정보를 볼수 있는 프로그램으로 보면 서로 달리 나오는것을 확인할수 있다.
파일업로드시 용량을 체크하려면 File System Object 를 사용해야 한다.
스크립트 보안 메세지가 뜨는 단점이 있다.
<html>
<head>
<script language="JavaScript">
function A(){
var oas = new ActiveXObject("Scripting.FileSystemObject");
var d = document.a.b.value;
var e = oas.getFile(d);
var f = e.size;
alert(f + " bytes");
}
</script>
</head>
<body>
<form name="a">
<input type="file" name="b">
<input type="button" name="c" value="SIZE" onClick="A();">
</form>
</body>
</html>
'Scripter > jQuery' 카테고리의 다른 글
| jQuery Grid Plugin : jqGrid (16) | 2009.04.06 |
|---|---|
| ext의 border-layout과 같은 jQuery UI.Layout Plugin (0) | 2009.01.14 |
| jQuery pageSlide (0) | 2009.01.12 |
| jQuery Loading바 구현하기 (2) | 2008.07.08 |