IE9 and File input, ajaxSubmit 오류 해결. 우핫핫!!! 실전 임베디드 2016. 8. 25. 2:10

고객 중에 IE9을 사용하는 사람이 매우 많아서, 이미지 파일을 올리는 ajaxSubmit이 동작하지 않는다.

오류는 SCRIPT5: Access is denied.

원인은 IE9이 form의 element 중에 type="file"인 놈이 있으면 javascript에서 form.submit()을 부를 때

SCRIPT5 오류를 주는 것이다.

 

이에 대한 해결책을 위하여 전전 끙끙...

며칠을 구글링을 했건만... 답은 단순,

      <label onclick="javascript:setGubun('photo','P');" for="file" id="link" class="trigger-file-input">사진등록1</label>
         <br />
         <label for="file" id="button_XX" class="trigger-file-input">사진등록2</label>

짜잔... 이게 다다!!!

순서를 설명하자면,

라벨을 클릭하면

1)  첫번째로 onclick이벤트 핸들러가 불린다.

2) 이벤트 핸들러에서는 필요한 값을 form 엘레먼트의 필드 엘레먼트에 넣어주면 된다.

3) 다음에는 LABEL에 연결된 엘레먼트가 가상으로 클릭 된다. 여기서는 type이 file인 input 엘레먼트에 연결되어 있으므로 파일을 선택하는 다이알로그가 뜬다.

4) 사용자가 파일을 선택하면 파일 엘레먼트의 change 이벤트 핸들러가 동작한다.

5) change 이벤트 핸들러는 form.ajaxSubmit을 호출해서 파일 업로드를 완료한다.

여기서는 $('#file').on("change", function() {이 change 이벤트 핸들러이다. 

 

아래는 마지막에 검색해서 알게 됐던 내용들이다.

 

As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.

The good news is that there is a way to bypass the security restriction from IE using a label :

1. Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
2. Disguise the label as a button using CSS.
3. The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.

 

<form >
<label for='fileid'>Upload</label> //This is shown to user.
<input type='file" id='fileid' style="position:absolute;left:-500px;" />  //This is not visible to User.
</form>

 

<form id="uploader-form" action="http://hotblocks.nl/_http_server.php">
    <label for="fileinput" id="link" class="trigger-file-input">Link Label</label>
    <br />
    <label for="fileinput" id="button_XX" class="trigger-file-input">Button Label</label>
    <input type="file" id="fileinput" />
</form>

 

이 아래 내용들은 <STYLE>에 들어갈 것들

body { font-family: Helvetica; }

/* hide the file input. important to position it offscreen as opposed display:none. some browsers don't like that */
#fileinput { position: absolute; left: -9999em; }

/* an example of styling your label to look/behave like a link */
#link { color: #2a9dcf; font-size: 16px; }
#link:hover { text-decoration: underline; cursor: pointer; }

/* an example of styling your label to look like a button */
#button_XX {
    display: block;
    width: 31px;
    height: 27px;
    text-indent: -9999em;
    background: transparent url(http://www.afar.com/assets/profile_sprite.png) 0 0 no-repeat;
}

#button:hover {
    cursor: pointer;
}

 

// dschae 추가영역 시작 - 이것들은 <SCRIPT>에 들어간다
// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );

// after the user selects the file they want to upload, submit the form
$('#file').on("change", function() {
alert('change call photoAdd()');
 photoAdd('photo', 'P');
/*
 var  options = {
  success      : applyAfter
 };
 $('#ajaxform').ajaxSubmit(options);
*/
});

// mozilla won't focus a file input with the click of a corresponding
// label, but all other browsers do. if we detect mozilla, listen for
// the label click and send a click to the file input programmatically
if (navigator.userAgent.indexOf("Firefox") > 0) {
    $('.trigger-file-input').click(function() {
      $('#file').click();                            
    });
}
});

 

====================================================================================

http://jsfiddle.net/djibouti33/uP7A9/

Edit fiddle - JSFiddle

jsfiddle.net