JS 업로드 파일이 현재 페이지를 새로 고치지 않습니다.

이번에는 JS가 현재 페이지를 새로 고치지 않고 파일을 업로드하는 경우와 JS가 현재 페이지를 새로 고치지 않고 파일을 업로드하는 경우의 주의 사항을 소개하겠습니다. 아래는 실제 사례입니다.

파일 업로드 시 페이지를 새로 고치지 않고 js를 사용하여 솔루션 제공

2eed732a8643f81570eb2757cb89c834
0e5999c1a9f42bf9dc0af437dd98b40bupload65281c5ac262bf6d81768915a4a77ac0
document.getElementById('upload-btn').onclick =function(){
 varoInput = document.getElementById('upload');
 varfile = oInput.files[0]; //选取文件
 varformData =newFormData();//创建表单数据对象
 formData.append('file',file);//将文件添加到表单对象中
 fetch({      //传输
  url:'./',
  mothod:'POST',
  body:formData
 })
 .then((d)=>{
 console.log('result is',d);
 alert("上传完毕！")
 })
}

이러한 효과를 얻으세요:

HTML+CSS를 사용하여 표시된 대로 레이아웃을 구현합니다. border-width:5px, 그리드 크기는 50px*50px, 마우스를 올리면 테두리가 빨간색으로 변하므로 의미화를 고려해야 합니다.

table{
  border-collapse:collapse;/* 为表格设置合并边框模型 */
  margin:50px;
  text-align:center;/* 设置文字居中 */
 }
 table tr{
  border:none;
 }
 table.tab td{
  width:50px;
  height:50px;
  border:5pxinsetblue;
 }
 table.tab td:hover{
  border:5pxsolidred;
  cursor:pointer;
 }
 <table class="tab">
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
 </tr>
 <tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
 </tr>
 <tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
 </tr>
 </table>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

js는 그림의 균일한 페이드인 및 페이드아웃을 실현합니다.

JS에서 숫자와 문자열을 변환하는 방법

위 내용은 JS 업로드 파일이 현재 페이지를 새로 고치지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!