새로 고치지 않고 파일을 업로드하고 맞춤 값을 반환합니다.

이 글에서는 개인 프로젝트에서 파일을 새로 고치지 않고 업로드하는 문제를 해결하는 방법과 예를 간략하게 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

오늘 개발 과정에서 이런 문제가 발생했습니다. 엑셀을 서버에 올려서 파싱해야 하는데, 문서가 부적절할 때 페이지를 새로 고쳐서 사용자에게 다음과 같은 메시지를 표시하지 않았으면 좋겠습니다. 문서가 부적절합니다. 오랫동안 고민한 끝에 인터넷에서 많은 정보를 찾았고 마침내 실험에 성공했습니다. 여기서 처리 방법을 공유하겠습니다.

먼저 처리 아이디어에 대해 말씀드리겠습니다. 페이지에 숨겨진 iframe을 추가하고 양식의 대상 속성을 iframe의 ID로 설정하면 양식이 제출될 때 Excel 파일이 파일 스트림 형식으로 백그라운드로 전송됩니다. 백그라운드에서 수신한 후 작업을 수행할 수 있습니다. iframe을 숨김으로 설정하기 전에는 iframe 콘텐츠의 변경 사항을 모니터링해야 합니다. 사용자 정의 처리의 다음 단계를 위해 기본 창의 JS 메서드에 콘텐츠를 전달합니다.

페이지 코드는 다음과 같습니다.

<form id="input" action="importExcel.jhtml" method="post" enctype="multipart/form-data" target="hiddenIFrame">
　　<input id="excelFile" name="file" type="file" />
　　<input type="submit" class="button" value="导入excel"/>
</form>
<iframe id=&#39;hiddenIFrame&#39; name=&#39;hiddenIFrame&#39; style="display:none;"></iframe>

JS 코드는 다음과 같습니다(jqeury를 도입해야 합니다).

$(function(){
  $("#hiddenIFrame").load(function(){
    var wnd = this.contentWindow;
    var str = $(wnd.document.body).html();
    callback(str);
  });
})
 
function callback(info){
  alert(info);
}

백그라운드 코드는 기존 제출과 마찬가지로 입력 구성 요소의 이름 값을 기반으로 동일한 이름의 파일 스트림을 가져옵니다. 예를 들어, 위 페이지 코드에서 입력 컴포넌트의 이름은 file 이고, 배경은 받은 파일 스트림(file)이라는 이름의 파일 스트림이며, 이를 받은 후 사용자 정의 작업을 수행할 수 있습니다.

더 많은 관련 튜토리얼을 보려면 JavaScript 튜토리얼

을 방문하세요.