JavaScript의 비동기 파일 업로드 기능 구현에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript의 비동기 파일 업로드 기능 구현에 대한 자세한 설명

Jan 02, 2018 pm 04:10 PM

javascript js 업로드

이 문서에서는 주로 기본 JavaScript를 사용하여 비동기 파일 업로드를 구현하는 방법에 대한 예를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

렌더링:

코드: (demo33.jsp)

&lt;%@ page contentType=&quot;text/html;charset=UTF-8&quot; language=&quot;java&quot; %&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;demo33.jsp&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;label for=&quot;text&quot;&gt;名称&lt;/label&gt;
&lt;input type=&quot;text&quot; id=&quot;text&quot; name=&quot;name&quot;/&gt;
&lt;label for=&quot;file&quot;&gt;文件&lt;/label&gt;
&lt;input type=&quot;file&quot; id=&quot;file&quot; name=&quot;file&quot;/&gt;
&lt;button type=&quot;button&quot; onclick=&quot;ajaxUploadFile()&quot;&gt;确定&lt;/button&gt;
&lt;/body&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
 function ajaxUploadFile() {
  var formData = new FormData();
  var xmlhttp;
  if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp = new XMLHttpRequest();
  }else {// code for IE6, IE5
   xmlhttp = new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
  }
  xmlhttp.open(&quot;POST&quot;,&quot;/data&quot;,true);
  xmlhttp.setRequestHeader(&quot;X-Requested-With&quot;, &quot;XMLHttpRequest&quot;);
  formData.append(&quot;name&quot;,document.getElementById(&quot;text&quot;).value);
  formData.append(&quot;file&quot;,document.getElementById(&quot;file&quot;).files[0]);
  xmlhttp.send(formData);
  xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4) {
    if (xmlhttp.status==200) {
     console.log(&quot;上传成功&quot;+xmlhttp.responseText);
    }else {
     console.log(&quot;上传失败&quot;+xmlhttp.responseText);
    }
   }
  }
 }
&lt;/script&gt;
&lt;/html&gt;

로그인 후 복사