>source

IE11에서만 발생하는 이상한 문제가 있습니다. 다음과 같은 형태가 있습니다 :

<form id="myform" action="http://my.url.com/mypage" method="POST">
    <a href="#" class="js-triggerFileInput">Send the file</a>
    <input type="file" name="myfile" class="hidden js-inputFile" />
    <input type="submit" value="submit" class="hidden" />
</form>

그리고 다음 자바 스크립트 (변환기와 ES6) :

class MyForm {
  constructor() {
    this.button = $('.js-triggerFileInput');
    this.file = $('.js-inputFile');
    this.form = $('#myform');
  }
  // when I click on the visible button, triggers the file input dialog box
  this.button.click(() => {
    this.file.click();
  });
  // the the file is selected in the dialog box, submit the form
  this.file.change(() => {
    this.form.submit();
  });
  // I added this just to debug
  this.form.submit(() => {
    console.log('submitted');
    return true;
  });
}

이 작업은 IE11을 제외한 모든 브라우저에서 작동하며 양식이 전혀 제출되지 않습니다.

제출 이벤트가 호출되고 매번 호출되는지 확인하기 위해 디버그를 추가했지만 브라우저는 양식을 제출하지 않습니다.

제출 버튼을 사용하여 양식을 제출하려고하면 제대로 작동하지만 자바 스크립트를 사용하여 제출하려고하면 이벤트가 트리거되지만 작동하지 않습니다.

내 코드에 문제가있는 사람이 있습니까?

나는 다른 접근법을 시도했다 :

<label for="myinput">Send the file</label>
<input id="myinput" type="file" class="hidden" />

기본 레이블/입력 동작을 사용하여 .click() 를 사용하지 않고 입력 파일을 트리거하십시오.  더 잘 작동하는 것처럼 보이지만 IE11에서는 입력 파일이 숨겨져 있으면 표시되지 않습니다 (표시 : 없음, 가시성 : 숨김 또는 불투명도 : 0).

Edit1: 브라우저 콘솔을 통해 이벤트를 트리거하면 양식이 제출됩니다.


  • 답변 # 1

    문제의 원인을 찾지 못했지만이 IE 버그를 우회 할 수있는 방법을 찾았습니다 :

    HTML :

    <form id="myform" action="http://my.url.com/mypage" method="POST">
        <label for="myfile">Send the file</label>
        <input type="file" name="myfile" id="myfile" class="js-inputFile" />
        <input type="submit" value="submit" class="hidden" />
    </form>
    
    

    JS :

    class MyForm {
      constructor() {
        this.file = $('.js-inputFile');
        this.form = $('#myform');
      }
      // the the file is selected in the dialog box, submit the form
      this.file.change(() => {
        this.form.submit();
      });
    }
    
    

    버튼 + JS를 사용하여 input [type = "file"] 동작을 트리거하지 않고 label + id를 사용하여 클릭을 트리거하면 매력처럼 작동합니다. 문제는 JS를 사용하여 입력 [type = "file"]을 트리거하는 것과 관련이있는 것 같습니다.

    또한 :

    양식 안에 입력 [type = "submit"]이 없으면 IE는 양식을 보내지 않습니다.

    IE는 입력을 트리거하지 않습니다 [type = "file"]이 숨겨져 있거나 보이지 않습니다. height를 사용하여 동일한 동작을 달성했습니다 : 0;너비 : 0;

  • 이전 c# - 선택한 항목을 배열의 첫 번째 지점에 저장할 수 없습니다
  • 다음 python - 작업을 직렬화 해제하지 못했습니다