자 바스 크 립 트 가 파일 을 업로드 할 때 페이지 를 새로 고침 하지 않 고 정리(추천)

1893 단어 js파일 업로드
js 로 파일 을 업로드 할 때 페이지 를 새로 고치 지 않 아 도 되 는 방안 을 제시 합 니 다.

 <input id="upload" type="file"/>
 <button id="upload-btn">upload</button>
 document.getElementById('upload-btn').onclick = function(){ 
  var oInput = document.getElementById('upload'); 
  var file = oInput.files[0];  //    
  var formData = new FormData(); //        
  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,hover 일 때 테두리 가 빨간색 으로 변 하 므 로 의미 화 를 고려 해 야 합 니 다.
       

 table{
   border-collapse:collapse; /*             */
   margin:50px;
   text-align:center; /*        */
  } 
  table tr{
   border:none;
  } 
  table.tab td{
   width:50px;
   height:50px;
   border:5px inset blue;
  } 
  table.tab td:hover{
   border:5px solid red;
   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>
이상 은 새로 고침 없 이 파일 을 올 리 는 모든 내용 입 니 다.저희 사 이 트 를 계속 응원 해 주시 기 바 랍 니 다~~

좋은 웹페이지 즐겨찾기