JavaScript에서 새로 고치지 않고 파일을 업로드하는 방법 소개

이 글에서는 페이지를 새로 고치지 않고 자바스크립트로 파일을 업로드하는 방법을 주로 소개합니다. js+css 코드를 사용하여 작업 과정을 자세히 소개합니다. 필요한 친구는 참고하면 됩니다.

js를 사용하여 새로 고침 없이 해결 방법을 알려드리겠습니다. 파일 업로드 시 페이지

 <input id="upload" type="file"/>
 <button id="upload-btn">upload</button>
 document.getElementById(&#39;upload-btn&#39;).onclick = function(){ 
  var oInput = document.getElementById(&#39;upload&#39;); 
  var file = oInput.files[0];  //选取文件
  var formData = new FormData(); //创建表单数据对象
  formData.append(&#39;file&#39;,file); //将文件添加到表单对象中
  fetch({       //传输
   url:&#39;./&#39;,
   mothod:&#39;POST&#39;,
   body:formData 
  }) 
  .then((d)=>{
  console.log(&#39;result is&#39;,d);
  alert("上传完毕！")
  })
 }

이러한 효과 달성:

HTML+CSS를 사용하여 표시된 대로 레이아웃을 구현합니다. 테두리 너비: 5픽셀, 그리드 크기는 50픽셀*50픽셀, 마우스를 올리면 테두리 빨간색으로 바뀌면 의미론을 고려해야 합니다. ㅋㅋ

위 내용은 JavaScript에서 새로 고치지 않고 파일을 업로드하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!