jquery+HTML5+Ajax는 진행률 표시줄을 사용하여 파일 업로드 기능을 구현합니다.
- php中世界最好的语言원래의
- 2018-04-23 14:53:311730검색
이번에는 진행 표시줄이 있는 파일 업로드 기능을 구현하기 위해 jquery+HTML5+Ajax를 가져왔습니다. 진행 표시줄을 사용하여 파일 업로드 기능을 구현하기 위해 jquery+HTML5+Ajax가 구현하는 notes는 무엇인가요? 실제 사례를 살펴보겠습니다.
먼저 HTML5에서 AJAX를 사용하여 데이터를 제출하려면 먼저 HTML5에 새로 추가된 개체인 FormData를 배워야 합니다.
FormData 개체는 추가 메서드를 사용하여 키-값 데이터를 추가할 수 있습니다. 우리가 일반적으로 사용하는 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 부분
페이지의 HTML 코드가 어떻게 작성되는지 살펴보겠습니다
<img width="400" height="250"/><br /> <input type="file" id="pic" name="pic" onchange="showPic()"/> <input type="button" value="上传图片" onclick="uploadFile()" /><br /> <p id="parent"> <p id="son"></p> </p>
하단의 p는 진행률 표시줄을 표시하는 데 사용되므로 해당 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를 로드한 후 JavaScript가 어떻게 작성되는지 살펴보겠습니다. 파일 구성 요소의 onchange 이벤트 방법:
function showPic(){
var pic = $("#pic").get(0).files[0];
$("img").prop("src" , window.URL.createObjectURL(pic) );
}
showPic의 첫 번째 줄은 파일 개체에서 업로드된 파일을 가져오는 것입니다. 두 번째 줄은 img에 대한 src 속성을 설정합니다. 페이지에 적용된 효과를 즉시 미리 볼 수 있습니다.
uploadFile 메소드를 살펴보기 전에 진행 이벤트(Progress Events)의 진행에 대해 간략하게 알아보겠습니다...
Progress Events 사양은 클라이언트-서버 통신과 관련된 측면을 정의하는 W3C의 작업 초안입니다. 이벤트. 이러한 이벤트는 원래 XHR 작업을 대상으로 했지만 이제는 다른 API에서도 사용됩니다. 다음과 같은 6가지 진행 이벤트가 있습니다.
loadstart: 해당 데이터의 첫 번째 바이트가 수신될 때 트리거됩니다.
진행: 응답을 받는 동안 지속적으로 트리거됩니다. // 한 가지만 살펴보겠습니다.
error: 요청에 오류가 발생할 때 발생합니다.
abort: abort() 메서드 호출로 인해 링크가 종료될 때 트리거됩니다.
로드: 완전한 해당 데이터가 수신되면 트리거됩니다.
loadend: 통신이 완료된 후 또는 오류, 중단 또는 로드 이벤트가 트리거된 후 트리거됩니다.
진행 이벤트는 Mozilla에서 제출합니다. 이 이벤트는 브라우저가 새 데이터를 수신하는 동안 주기적으로 실행됩니다. onprogress 이벤트 처리 프로그램은 대상 속성이 XHR 객체이지만 세 가지 추가 속성을 포함하는 이벤트 객체를 수신합니다.
lengthComputable: 진행 정보를 사용할 수 있는지 여부를 나타내는 부울 값
position: 수신되었음을 나타냅니다. 바이트 수
totalSize: 해당 Content-Length 헤더를 기반으로 결정된 예상 바이트 수를 나타냅니다.
이 정보를 사용하여 사용자를 위한 진행률 표시기를 만들 수 있습니다. 그러나 문제가 다시 발생합니다. jQuery의 ajax 메서드에는 진행 이벤트에 대한 작업이 없습니다. 어떻게 되는걸까요~~
다행히 정보를 확인한 결과 jQuery의 ajax 메소드에서 호출되는 XMLHttpRequest 객체를 지정할 수 있다는 것을 알게 되었어요! ! !
라인 8453을 보세요, 그게 다입니다. 따라서 코드는 uploadFile 메소드의 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 />
<p id="parent">
<p id="son"></p>
</p>
</body>
</html>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
파일 업로드 단계의 Jquery+LigerUI 구현 자세한 설명
jQuery가 XML 파일 콘텐츠를 읽는 방법
위 내용은 jquery+HTML5+Ajax는 진행률 표시줄을 사용하여 파일 업로드 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!