!!! IE 6.0밖에 안되는 듯?!!!!
아마도 FF문제와 같이 locally loaded image에 대해서는 IE6.0밖에 안되는 듯
내가 사용하는 버젼
문제: callback 함수에는 인자 넘기기가 불가능한가?
전역변수로 해결하였으나 다른 방법은 없는가??
참고: http://www.coderanch.com/t/121417/HTML-JavaScript/Passing-Parameter-Into-Callback-Function
jsp
js
아마도 FF문제와 같이 locally loaded image에 대해서는 IE6.0밖에 안되는 듯
내가 사용하는 버젼
문제: callback 함수에는 인자 넘기기가 불가능한가?
전역변수로 해결하였으나 다른 방법은 없는가??
참고: http://www.coderanch.com/t/121417/HTML-JavaScript/Passing-Parameter-Into-Callback-Function
jsp
| <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="image_util.js"></script> <script type="text/javascript"> function fileCheck(formObj) { if(formObj.fileName.value == "") { alert("이미지를 선택해주세요."); return false; } if(formObj.checkUploadImgOkYn.value != "Y") { alert("업로드 할 수 없는 이미지 파일입니다."); return false; } return true; } </script> </head> <body> <form name="F" onsubmit="return fileCheck(this);"> <input type="file" name="fileName" onChange="checkUploadImg(this.value, 'checkUploadImgOkYn', 'jpg' ,1600, 1200, 500)" > <input type="hidden" name="checkUploadImgOkYn" id="checkUploadImgOkYn" value="N"> <br> <input type="submit"> </form> </body> </html> |
js
| // 이미지 파일 관련 javascript /** * 파일 확장자를 반환 * @param filePath 파일 path * @return 확장자 */ function getFileExtension(filePath) { var lastIndex = -1; lastIndex = filePath.lastIndexOf('.'); var extension = ""; if ( lastIndex != -1 ) { //extension = filePath.substring( lastIndex+1, filePath.len ); extension = filePath.substring( lastIndex+1); } else { extension = ""; } return extension; } // 이미지.onload시의 callback 함수에 파라미터를 넘기기 위한 전역변수 var g_objId = ""; // 이미지 체크 후, 그 결과를 설정할 input태그의 id. ex) <input type="hidden" name="checkUploadImgOkYn" id="checkUploadImgOkYn" value="N"> var g_widthLimit = 0; // 이미지 최대 가로길이 var g_heightLimit = 0; // 이미지 최대 세로길이 var g_fileSizeLimit = 0; // 이미지 최대 파일크기 /** * 이미지 업로드 태그에서 부를 함수. ex) <input type="file" name="fileName" onChange="checkUploadImg(this.value, 'checkUploadImgOkYn', 'jpg' ,1600, 1200, 500)" > * @param imgSrc 이미지 파일 * @param objId 이미지 체크 후 결과를 설정할 input태그의 id * @param fileExt_limit 이미지 파일 확장자 제한 * @param width_limit 이미지 최대 가로길이 * @param height_limit 이미지 최대 세로길이 * @param fileSize_limit 이미지 최대 파일크기 * @return 없음. 체크에 성공하면 objId에 Y를 설정. 실패하면 N을 설정함. */ function checkUploadImg(imgSrc, objId, fileExt_limit, width_limit, height_limit, fileSize_limit) { var widthLimit = 0; var heightLimit = 0; var fileSizeLimit = 0; var fileExtLimit = ""; if(typeof width_limit != "undefined") { // 제약조건이 있으면 widthLimit = width_limit; } if(typeof height_limit != "undefined") { // 제약조건이 있으면 heightLimit = height_limit; } if(typeof fileSize_limit != "undefined") { // 제약조건이 있으면 fileSizeLimit = fileSize_limit; } if(typeof fileExt_limit != "undefined") { // 제약조건이 있으면 fileExtLimit = fileExt_limit; } else { // 이미지 파일만 업로드해야 하므로 조건이 없으면 기본설정 fileExtLimit = "jpg,gif,png"; } // global 변수에 저장. callback함수에 인자 넘기기 불가하기 때문 g_objId = objId; g_widthLimit = widthLimit; g_heightLimit = heightLimit; g_fileSizeLimit = fileSizeLimit; // IE 체크 if(navigator.userAgent.toLowerCase().indexOf("msie") == -1) { // IE가 아니면 var msg = "파일 확장자 : " + fileExtLimit; msg = (widthLimit != 0) ? msg + " , 이미지 가로 길이 : " + widthLimit : msg; msg = (heightLimit != 0) ? msg + " , 이미지 가로 길이 : " + heightLimit : msg; msg = (fileSizeLimit != 0) ? msg + " , 이미지 가로 길이 : " + fileSizeLimit : msg; alert("인터넷 익스플로러가 아닌 경우에는 업로드할 그림을 확인할 수 없습니다.\n다음의 조건에 맞는 파일을 업로드해 주세요.\n" + msg); document.getElementById(g_objId).value = "Y"; return; } if(typeof imgSrc == "undefined" || imgSrc == "") { alert("선택된 파일이 없습니다."); } var ext = getFileExtension(imgSrc); //alert(ext); if (ext == "") { alert('올바른 파일을 입력하세요'); return; } else if(fileExtLimit != "" && ext.toLowerCase().indexOf(fileExtLimit.toLowerCase()) == -1) { // 제약조건이 없으면 체크 안 함 alert(fileExtLimit + " 형식의 파일만 가능합니다."); return; } LoadImg(imgSrc); } /** * 이미지를 로드 * @param imgSrc 이미지 파일 path * @return */ function LoadImg(imgSrc) { var imgInfo = new Image(); imgInfo.onload = img_Loaded; imgInfo.onerror = function() { // always called alert("이미지 파일의 로드에 실패했습니다."); document.getElementById(g_objId).value = "N"; }; imgInfo.src = imgSrc; } /** * image.onload의 callback 함수. image가 load 되면 불려진다. * @return */ function img_Loaded() { /*var imgSrc, imgWidth, imgHeight, imgFileSize; imgSrc = this.src; imgWidth = this.width; imgHeight = this.height; imgFileSize = this.fileSize; alert(imgWidth);*/ var objId = g_objId; var widthLimit = g_widthLimit; var heightLimit = g_heightLimit; var fileSizeLimit = g_fileSizeLimit; //alert(widthLimit); //alert(heightLimit); if (this.src == "" || this.width <= 0 || this.height <= 0) { alert("이미지 파일의 로드에 실패했습니다."); document.getElementById(objId).value = "N"; return; } // 제약조건 확인 if(widthLimit != 0 && this.width > widthLimit) { alert("선택한 이미지의 가로 길이가 허용치인 " + widthLimit + " 를 초과했습니다.\n선택한 이미지의 가로 길이는 " + this.width + " 입니다."); document.getElementById(objId).value = "N"; return; } if(heightLimit != 0 && this.height > heightLimit) { alert("선택한 이미지의 세로 길이가 허용치인 " + heightLimit + " 를 초과했습니다.\n선택한 이미지의 세로 길이는 " + this.height + " 입니다."); document.getElementById(objId).value = "N"; return; } if(fileSizeLimit != 0 && this.fileSize > fileSizeLimit*1024) { alert("선택한 이미지 크기가 허용치인 " + fileSizeLimit + "KB 를 초과했습니다.\n선택한 이미지의 크기는 약 " + Math.ceil(this.fileSize/1024) + "KB 입니다."); document.getElementById(objId).value = "N"; return; } // 제약조건 이내라면 document.getElementById(objId).value = "Y"; //이미지 사이즈 저장 //document.F.imgWidth.value = imgWidth; //document.F.imgHeight.value = imgHeight; //alert("this.width = " + this.width); //alert("this.height = " + this.height); //alert(document.getElementById(objId).value); } |
'프로그래밍 > Web' 카테고리의 다른 글
| [javascript] IE6.0 프레임 - 가로 스크롤바 버그 (0) | 2009.08.21 |
|---|---|
| [ajax] 소스 (0) | 2009.08.19 |
| [javascript] 이미지 파일 업로드 시 이미지의 사이즈 알아내기 (0) | 2009.07.29 |
| [html] HtmlCleaner를 이용한 html 파싱 (1) | 2009.07.27 |
| [javascript] 스크립트로 style, class 변경 (1) | 2009.07.24 |
