HTML 5 Ajax 기반 파일 업로드 및 진행 표시

3065 단어 ajax파일 업로드진도 표
본 논문 의 사례 는 ajax 업로드 파일 및 진도 항목 의 실현 방법 을 설명 하 였 으 며,여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
효과 그림:

html 5 업 로드 는 동기 업로드 방식 이기 때문에 진행 표시 줄 을 표시 할 수 있 습 니 다.
1.파일 업로드:
우선 ajax 로파일 대상:

var file = null; 
var input = $("#file_upload"); 
//        ,   readFile   
input.addEventListener('change',readFile,false); 
function readFile(){ 
 file = this.files[0]; 
}
 그리고 FormData()로 백 스테이지 로 보 냅 니 다.

 var fd = new FormData(); 
fd.append("file", file);
 2.감청 이벤트:XML HttpRequest 에 업 로드 된 감청 이 벤트 를 추가 하면 업 로드 된 파일 크기 를 얻 을 수 있 습 니 다.

 
//     
hr.upload.addEventListener("progress", uploadProgress, false);
전체 코드 는 다음 과 같 습 니 다:

<html> 
<head> 
<meta charset="utf-8"> 
<title>     </title> 
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script> 
</head> 
<body> 
 
 <input type="file" id="file_upload"/> 
 <input type="button" value="  " id="upload"/> 
 <div style="background:#848484;width:100px;height:10px;margin-top:5px"> 
 <div id="progressNumber" style="background:#428bca;width:0px;height:10px" > 
 </div> 
 </div> 
 <font id="percent">0%</font> 
</body> 
<script> 
var file = null; 
$(function(){ 
 $("#upload").click(function(){ 
 upload(); 
 }); 
}); 
var input = document.getElementById("file_upload"); 
 
//        ,   readFile   
input.addEventListener('change',readFile,false); 
 
function readFile(){ 
 file = this.files[0]; 
} 
//     
function upload(){ 
 var xhr = new XMLHttpRequest(); 
 
 var fd = new FormData(); 
 
 fd.append("fileName", file); 
 
 //     
 xhr.upload.addEventListener("progress", uploadProgress, false); 
 
 //             
 xhr.open("POST", "../UploadServlet",true); 
 
 xhr.send(fd); 
 } 
 
 function uploadProgress(evt){ 
 if (evt.lengthComputable) {   
  //evt.loaded：        evt.total：         
  var percentComplete = Math.round((evt.loaded) * 100 / evt.total); 
  //     ，        
  $("#percent").html(percentComplete + '%') 
  $("#progressNumber").css("width",""+percentComplete+"px");  
 } 
 } 
</script> 
</html>
이상 은 ajax 가 진행 조 가 있 는 파일 에 대해 모든 내용 을 업로드 하 는 것 입 니 다.여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.
SpringBoot 통합 Redisson 분포 식 잠 금 실현 방법 예시
my batis 의@param 을 왜 사용 하 는 지 말씀 드 리 겠 습 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage