Access Denied Error Input Type="File"에 대한 단상 > script

Access Denied Error Input Type="File"에 대한 단상

작성일 07-08-22 09:44

페이지 정보

작성자서방님 조회 168회 댓글 0건

본문

Input file 태그의 value 속성은 읽기 전용 이다.

value 값을 세팅할 수 있는 유일한 방법은 사용자가 찾아보기 버튼을 클릭해야만 한다.

트릭으로, 찾아보기 버튼 대신 이미지 버튼을 이용한 방법도, 결국은 찾아보기 버튼을 눈속임으로 투명처리 하는 것일 뿐, 찾아보기 버튼이 클릭된다.

한가지 의문이 드는 것이 있다. 왜 읽기 전용일까?

일부 얘기로는 보안상의 이유를 들고 있는데, 그렇게 말하는 당사자도 왜 보안상의 이유가 발생하는지에 대해서 언급한 내용은 찾지 못했다.

무엇이 보안에 영향을 준단 말인가? 역으로 value 값을 변경하는 것이 보안에 영향을 줄 수 있다는 걸 증명하면 그 말이 사실 일 것이다.

증명하는 것은 일단 뒤로 하로...

현재, 파일 첨부 커스텀 UI를 만들면서 2가지 타입을 지원하려고 한다.

첫째, 일반 파일 첨부 기능 이다.

둘째, 사진 전용 파일 첨부 기능 이다.

제목에서 언급 했지만, 문제가 되는 부분이 value 값을 변경 한 뒤에 submit()이 발생할 때, 액세스 접근 오류가 발생한다는 것이다.

첫째의 경우는 value 값을 변경하는 부분이 없다.

따라서, 이 문제가 발생하지 않는다. 참만 다행이 아닐 수 없다.

둘째의 경우가 문제인데, 사용자가 이미지를 첨부하고 미리보기를 한 후 다른 파일로 바꾸고 싶을 경우가 생길 것이다.

그러면, 파일을 대체 할 수 있도록 첨부한 파일을 삭제할 수 있는 버튼이 필요하다.

삭제 로직이 조금 보잡하다, 다음 코드를 보자

(중략)

//form.submit() 사용 시 "액세스 거부" 에러 발생.

inputs[fileElementName].select();

document.execCommand('Delete');

(중략)
//특정영역으로 포커스 이동하기 위해서

img1["hiddenImg"].focus();

(중략)

삭제 구현의 핵심 코드만 뽑아 낸 것인데, 삭제처리는 value = "" 으로 처리하는 걸 말한다.

그러나, 읽기전용 때문에 value= "" 는 안 되고, 우회적인 방법이 삭제대상 파일을 select 한 뒤에 delete 시키는 것이다. 그리고, hidden 태그에 포커스를 준 코드는, 삭제 버튼 클릭 후 동일한 파일을 다시 추가할 때, 미리보기가 가능하기 위해서 꽁수 코드 이다. 포커스를 주지 않으면 동일한 파일을 추가 하면, 미리보기가 되지 않는다.

나름 대로 이유를 분석 한 결과, input file 태그 value 값의 변경 유무, 즉 onChange 이벤트가 발생되는 시점은 value 값을 수동으로 지우든, 스크립트로 지우든 간에 바로 변경이 확인되지 않는다. document 의 다른 부분에 포커스가 발생할 때 비로소 변경되었다는 것을 알 수 있다.

여기까지는 좋다. 원하는 대로 꽁수를 부려서 잘 왔다. 그러나, 정작 파일을 보내기 위해서는 submit() 필수 인데, 이 놈을 호출하는 순간 액세스 에러가 발생한다.

한가지 아이디어가 떠오른다. input 파일 태그를 동적으로 처리하는 것이다.

//파일 추가

function Add()

{

div.InnerHTML = "<input type='file'...>";

}
//파일 삭제
function Del()

{

div.InnderHTML = "<input type='file'..>";

}

<form>

<div></div> // 파일 영역

</form>

가능할까? 시도해보는 것이다.

[위 가정에 대한 첨언]

결론을 먼저 말하면, 위 방법대로 해결 되었다.

그 동안 문제가 되었던 사항은 다음과 같다.

1. 동일파일 추가/삭제 시 미리보기 안 된 점.

2. submit() 호출 시 액세스 거부에러 발생.

두가지 문제를 InnderHTML을 통해 동적으로 처리함으로써, 우회적인 방법으로 해결 하였다.

//파일 추가

function ThumbAdd(fileElementName, imgElementName, left)
   {
    var tblFile = document.getElementById("tblFile");
    var inputs = document.getElementsByName(fileElementName);
    var img = document.getElementsByName(imgElementName);

    if(tblFile != null)
    {
    tblFile.innerHTML =
       "<table width='100%'>" +
        "<tr>" +
         "<td>" +
          "<input type='image' src='ap_btn_pic.gif'>" +
         "</td>" +
         "<td>" +
          "<img src='ap_btn_picd.gif' omclick="ThumbDelete('" + tblFile + "', '" + fileElementName + "', '" + imgElementName + "', '" + left + "')" style='CURSOR:hand'>" +
          "<input type='file' name='file' id='" + fileElementName + "' omChange="ThumbAdd('" + fileElementName + "', '" + imgElementName + "')" style='Z-INDEX:1;HEIGHT:30px;FILTER:alpha(opacity=0); LEFT:" + left + "px;WIDTH:20px;CURSOR:hand;'></input>" +
         "</td>" +
        "</tr>" +
       "</table>";
    }

    if(inputs[fileElementName].value == "")
     img[imgElementName].style.display = "none";
    else
     img[imgElementName].style.display = "";

    img[imgElementName].src = inputs[fileElementName].value;
   }

//파일삭제

function ThumbDelete(tblFile, fileElementName, imgElementName, left)
   {
    var img = document.getElementsByName(imgElementName);
    var file = document.getElementById(tblFile);

    if(file != null)
    {
    file.innerHTML =
       "<table width='100%'>" +
        "<tr>" +
         "<td>" +
          "<input type='image' src='ap_btn_pic.gif'>" +
         "</td>" +
         "<td>" +
          "<img src='ap_btn_picd.gif' omclick="ThumbDelete('" + tblFile + "', '" + fileElementName + "', '" + imgElementName + "', '" + left + "')" style='CURSOR:hand'>" +
          "<input type='file' name='file' id='" + fileElementName + "' omChange="ThumbAdd('" + fileElementName + "', '" + imgElementName + "')" style='Z-INDEX:1;HEIGHT:30px;FILTER:alpha(opacity=0); LEFT:" + left + "px;WIDTH:20px;CURSOR:hand;'></input>" +
         "</td>" +
        "</tr>" +
       "</table>";
    }
    img[imgElementName].style.display = "none";
   }

</script>

<form>

</form>

댓글목록

등록된 댓글이 없습니다.