HTML 5 Ajax 파일 업로드 진행 막대 기반(jquery 버 전)

7612 단어 html5ajaxjquery파일 업로드진도 표
지난 글 에서 여러분 께 소개 하 였 습 니 다이 글 의 백 스테이지 Servlet.그래서 여 기 는 프론트 데스크 의 JS 코드 만 봅 니 다.
먼저 HTML 5 는 AJAX 로 데 이 터 를 제출 할 때 HTML 5 가 새로 추 가 된 대상 을 배 워 야 합 니 다:FormData
FormData 대상 은 append 방법 으로 key-value 의 데 이 터 를 추가 할 수 있 습 니 다.예전 에 우리 가 자주 사용 하 던 json 과 달리 바 이 너 리 파일 을 비동기 로 업로드 할 수 있 습 니 다.
1.FormDate 대상 의 생 성

var formData = new FormData();
2.FormDate 대상 에 데이터 추가

formData.append("catname", "     ");
formData.append("age", 1); 　　　　　　　　//             
//             ，  fileInputElement                
formData.append("userfile", fileInputElement.files[0]);
//       Blob       formData  
var oFileBody = "<a id="a"><b id="b">hey!</b></a>"; 
var oBlob = new Blob([oFileBody], { type: "text/xml"});
formData.append("webmasterfile", oBlob);
3.FormData 대상 사용

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload");
xhr.send(formData);
HTML 부분
FormData 대상 에 대한 간단 한 소개 가 끝 난 후에 페이지 의 HTML 코드 가 어떻게 쓰 여 있 는 지 살 펴 보 겠 습 니 다.

<img width="400" height="250"/><br /> 
<input type="file" id="pic" name="pic" onchange="showPic()"/>
<input type="button" value="    " onclick="uploadFile()" /><br /> 
<div id="parent">
 <div id="son"></div>
</div>
맨 아래 div 는 진 도 를 표시 하 는 데 사용 되 기 때문에 대응 하 는 css 스타일 이 필요 합 니 다.스타일 은 아래 와 같 습 니 다.색상 이 예 쁘 지 않 으 니 직접 고 쳐 주세요.

<style type="text/css"> 
 #parent{width:550px; height:10px; border:2px solid #09F;} 
 #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
</style>
JS 부분
중요 한 장면 이 왔 습 니 다.페이지 에 jquery 를 불 러 온 후에 자 바스 크 립 트 가 어떻게 쓰 였 는 지 보 겠 습 니 다.먼저 file 구성 요소 의 onchange 이벤트 방법 입 니 다.

function showPic(){
 var pic = $("#pic").get(0).files[0];
 $("img").prop("src" , window.URL.createObjectURL(pic) );
}
쇼 픽 의 첫 줄 은 file 대상 에서 파일 을 업로드 하 는 것 입 니 다.두 번 째 줄 은 img 에 src 속성 을 설정 하 였 습 니 다.페이지 에서 즉시 미리 보기 효 과 를 얻 을 수 있 습 니 다.
uploadFile 방법 을 보기 전에 진도 이벤트(Progress Events)의 progress 를 간단하게 배 워 봅 시다. 
Progress Events 규범 은 W3C 의 작업 초안 으로 클 라 이언 트 서버 통신 과 관련 된 사건 을 정의 합 니 다.이 사건 들 은 최초 로 XHR 작업 에 대한 값 이 었 으 나 현재 다른 API 에 의 해 참고 되 고 있다.다음 6 개의 진도 사건 이 있다.
loadstart:해당 데이터 의 첫 번 째 바이트 가 수신 되 었 을 때 터치 합 니 다.
progress:해당 기간 동안 지속 적 으로 촉발 합 니 다.//우리 하나만 보 자.
error:요청 에 오류 가 발생 했 을 때 발생 합 니 다.
abort:abort()방법 을 호출 하여 링크 를 종료 할 때 촉발 합 니 다.
load:완전한 데 이 터 를 받 았 을 때 촉발 합 니 다.
loadend:통신 이 완료 되 거나 error,abort 또는 load 사건 을 촉발 한 후 촉발 합 니 다.
progress 이 벤트 는 Mozilla 가 제출 한 것 입 니 다.이 이 벤트 는 브 라 우 저 에서 새 데 이 터 를 받 는 동안 주기 적 으로 실 행 됩 니 다.한편,onprogress 이벤트 처리 프로그램 은 이벤트 대상 을 받 습 니 다.target 속성 은 XHR 대상 이지 만 세 개의 추가 속성 을 포함 합 니 다.
length Computable:진도 정 보 를 사용 할 수 있 는 불 값 을 표시 합 니 다.
position:받 은 바이트 수 를 표시 합 니 다.
totalSize:Content-Length 의 해당 머리 에 따라 예상 되 는 바이트 수 를 표시 합 니 다.
이런 정보 가 있 으 면 우 리 는 사용 자 를 위해 진도 표시 기 를 만 들 수 있다.그러나 문제 가 또 생 겼 다.jQuery 의 ajax 방법 은 progress 사건 에 대한 조작 이 없다.이거 어떻게 해~~
자 료 를 찾 아 보 니 jQuery 의 ajax 방법 으로 호출 된 XML HttpRequest 대상 은 지정 할 수 있 습 니 다!!!

8453 줄 을 보면 바로 그것 이다.그래서 upload File 방법의 ajax 부분 에서 코드 가 이 스타일 로 바 뀌 었 습 니 다.
가장 중요 한 부분 코드:

function uploadFile(){
　　
　　//       ，   formData    
　　var pic = $("#myhead").get(0).files[0];
　　var formData = new FormData();
 formData.append("file" , pic);
　　$.ajax({
　　　　type: "POST",
　　　　url: "upload",
　　　　data: formData ,　　//          formData   
　　　　processData : false, 
　　　　//  false         Content-Type 
　　　　contentType : false , 
　　　　
　　　　//       jQuery    XMLHttpRequest  ，     progress     ，       ajax  
　　　　xhr: function(){
　　　　　　var xhr = $.ajaxSettings.xhr();
　　　　　　if(onprogress && xhr.upload) {
　　　　　　　　xhr.upload.addEventListener("progress" , onprogress, false);
　　　　　　　　return xhr;
　　　　　　}
　　　　} 
　　});
}
마지막 으로 onprogress 방법 을 추가 하여 전체 기능 에 마침 표를 찍 습 니 다.

/**
 *          ,      0.05-0.1     
 */
function onprogress(evt){
　　var loaded = evt.loaded;     //         
 var tot = evt.total;      //      
 var per = Math.floor(100*loaded/tot);  //         
　　$("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}
마지막 으로 전체 페이지 의 코드 를 첨부 하여 비교 하기 편리 하 다.

<!DOCTYPE html>
<html>
 <head>
 <title>html5_2.html</title>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <style type="text/css"> 
  #parent{width:550px; height:10px; border:2px solid #09F;} 
  #son {width:0; height:100%; background-color:#09F; text-align:center; line-height:10px; font-size:20px; font-weight:bold;} 
 </style>
 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
 <script type="text/javascript">
 function showPic(){
  var pic = $("#pic").get(0).files[0];
  $("img").prop("src" , window.URL.createObjectURL(pic) );
  uploadFile();
 }
 function uploadFile(){
  var pic = $("#pic").get(0).files[0];
  var formData = new FormData();
  formData.append("file" , pic);
  /** 
   *   false    jQuery  formdata       
   * XMLHttpRequest   formdata         
   */ 
  $.ajax({
   type: "POST",
   url: "upload",
   data: formData ,
   processData : false, 
   //  false         Content-Type 
   contentType : false , 
   xhr: function(){
    var xhr = $.ajaxSettings.xhr();
    if(onprogress && xhr.upload) {
     xhr.upload.addEventListener("progress" , onprogress, false);
     return xhr;
    }
   } 
  });
 }
 /**
  *          ,      0.05-0.1     
  */
 function onprogress(evt){
  var loaded = evt.loaded;     //         
  var tot = evt.total;      //      
  var per = Math.floor(100*loaded/tot);  //         
  $("#son").html( per +"%" );
  $("#son").css("width" , per +"%");
 }
 </script>
 </head>
 <body>
 <img width="400" height="250"/><br /> 
 <input type="file" id="pic" name="pic" onchange="showPic()"/>
 <input type="button" value="    " onclick="uploadFile()" /><br /> 
 <div id="parent">
  <div id="son"></div>
 </div> 
 </body>
</html>
자바 이상 및 finally 인 스 턴 스 분석
정규 표현 식 을 통 해 빈 줄 을 삭제 하 는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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