lengthComputable ：表示進度資訊是否可用的布林值" >事件處理程式會接收到一個event對象，其target屬性是XHR對象，但包含著三個額外的屬性：
lengthComputable ：表示進度資訊是否可用的布林值
jquery+HTML5+Ajax實作具有進度條的檔案上傳功能
這次帶給大家jquery HTML5 Ajax實作帶有進度條的檔案上傳功能，jquery HTML5 Ajax實作有進度條檔上傳功能的注意事項有哪些，下面就是實戰案例，一起來看一下。
首先HTML5用AJAX提交資料先要學習一個HTML5新增加的物件：FormData
FormData 物件可以使用append 方法進行key - value的資料添加，與以前我們常用的json不同的就是可以異步上傳二進位。
1、FormDate物件的建立
var formData = new FormData();
#2、新增資料
#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);
##1使用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 /> <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>#重頭戲來了，在頁面上加載上jquery後我們來看JavaScript 是怎麼寫的，首先是file 元件的onchange事件方法：
function showPic(){
var pic = $("#pic").get(0).files[0];
$("img").prop("src" , window.URL.createObjectURL(pic) );
}showPic的第一行是從file 物件得到上傳檔案。第二行則為 img 設定了src屬性。可以在頁面中得到即時預覽的效果。
在看uploadFile 方法之前，再讓我們簡單學習進度事件（Progress Events ）的progress 吧......
Progress Events規範是W3C的一個工作草案，定義了與客戶端伺服器通訊有關的事件。這些事件最早其實值針對XHR操作，但目前也被其它API借鏡。有以下6個進度事件。 loadstart：在接收到對應資料的第一個位元組時觸發。
progress：在接收對應期間持續不斷觸發。 //我們就只看著一個好了
abort：在因為呼叫abort()方法而終止連結時觸發。 load：在接收到完整的對應資料時觸發。 loadend：在通訊完成或觸發error、abort或load事件後觸發。
事件處理程式會接收到一個event對象，其target屬性是XHR對象，但包含著三個額外的屬性：
lengthComputable ：表示進度資訊是否可用的布林值
###position ：表示已經接收的位元組數######totalSize ：表示根據Content-Length對應頭部所確定的預期位元組數。 ######有了這些訊息，我們就可以為使用者建立一個進度指示器了。但是 問題又來了， jQuery的 ajax 方法沒有關於 progress 事件的操作。這怎麼玩~~######好在透過查閱資料發現，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;
}
}
});
}/**
* 侦查附件上传情况 ,这个方法大概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>以上是jquery+HTML5+Ajax實作具有進度條的檔案上傳功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
微信檔案過期怎麼恢復 微信的過期檔案能恢復嗎
Feb 22, 2024 pm 02:46 PM
開啟微信，在我中選擇設置，選擇通用後選擇儲存空間，在儲存空間選擇管理，選擇要恢復檔案的對話選擇感嘆號圖示。教學適用型號：iPhone13系統：iOS15.3版本：微信8.0.24解析1先開啟微信，在我的頁面中點選設定選項。 2接著在設定頁面中找到並點選通用選項。 3然後在通用頁面中點選儲存空間。 4接下來在儲存空間頁面中點選管理。 5最後選擇要恢復檔案的對話，點選右側的感嘆號圖示。補充：微信文件一般幾天過期1要是微信接收的文件並沒有點開過的情況下，那在七十二鐘頭之後微信系統會清除掉，要是己經查看了微信
照片無法開啟此文件，因為格式不受支援或文件已損壞
Feb 22, 2024 am 09:49 AM
在Windows系統中，照片應用程式是一個方便的方式來檢視和管理照片和影片。透過這個應用程序，用戶可以輕鬆存取他們的多媒體文件，而無需安裝額外的軟體。然而，有時用戶可能會碰到一些問題，例如在使用照片應用程式時遇到「無法開啟此文件，因為不支援該格式」的錯誤提示，或在嘗試開啟照片或影片時出現文件損壞的問題。這種情況可能會讓使用者感到困惑和不便，需要進行一些調查和修復來解決這些問題。當用戶嘗試在Photos應用程式上開啟照片或影片時，會看到以下錯誤。抱歉，照片無法開啟此文件，因為目前不支援該格式，或該文件
可以刪除Tmp格式檔案嗎？
Feb 24, 2024 pm 04:33 PM
Tmp格式檔案是一種暫存檔案格式，通常由電腦系統或程式在執行過程中產生。這些文件的目的是儲存臨時數據，以幫助程式正常運行或提高效能。一旦程式執行完成或電腦重啟，這些tmp檔案往往就沒有了存在的必要性。所以，對於Tmp格式檔案來說，它們本質上是可以刪除的。而且，刪除這些tmp檔案能夠釋放硬碟空間，確保電腦的正常運作。但是，在刪除Tmp格式檔案之前，我們需
出現0x80004005錯誤代碼怎麼辦 小編教你0x80004005錯誤代碼解決方法
Mar 21, 2024 pm 09:17 PM
在電腦中刪除或解壓縮資料夾，時有時會彈出提示對話框“錯誤0x80004005：未指定錯誤”，如果遇到這中情況應該怎麼解決呢？提示錯誤碼0x80004005的原因其實很多，但大部分因為病毒導致，我們可以重新註冊dll來解決問題，下面，小編給大夥講解0x80004005錯誤代碼處理經驗。有使用者在使用電腦時出現錯誤代碼0X80004005的提示，0x80004005錯誤主要是由於電腦沒有正確註冊某些動態連結庫文件，或電腦與Internet之間存在不允許的HTTPS連接防火牆所引起。那麼如何
斜線和反斜線在檔案路徑中的不同使用
Feb 26, 2024 pm 04:36 PM
檔案路徑是作業系統中用於識別和定位檔案或資料夾的字串。在檔案路徑中，常見的有兩種符號分隔路徑，即正斜線（/）和反斜線（）。這兩個符號在不同的作業系統中有不同的使用方式和意義。正斜線（/）是Unix和Linux系統中常用的路徑分隔符號。在這些系統中，檔案路徑是以根目錄（/）為起始點，每個目錄之間使用正斜線進行分隔。例如，路徑/home/user/Docume
夸克網盤的檔案怎麼轉移到百度網盤？
Mar 14, 2024 pm 02:07 PM
夸克網盤和百度網盤都是現在最常用的儲存文件的網盤軟體，如果想要將夸克網盤內的文件保存到百度網盤，要怎麼操作呢？本期小編整理了夸克網盤電腦端的檔案轉移到百度網盤的教學步驟，一起來看看是怎麼操作吧。 夸克網盤的檔案怎麼存到百度網盤？要將夸克網盤的文件轉移到百度網盤，首先需在夸克網盤下載所需文件，然後在百度網盤用戶端中選擇目標資料夾並開啟。接著，將夸克網盤中下載的檔案拖放到百度網盤用戶端開啟的資料夾中，或使用上傳功能將檔案新增至百度網盤。確保上傳完成後在百度網盤中查看檔案是否已成功轉移。這樣就
hiberfil.sys是什麼檔案？ hiberfil.sys可以刪除嗎？
Mar 15, 2024 am 09:49 AM
最近有很多網友問小編，hiberfil.sys是什麼文件？ hiberfil.sys佔用了大量的C碟空間可以刪除嗎？小編可以告訴大家hiberfil.sys檔是可以刪除的。下面就來看看詳細的內容。 hiberfil.sys是Windows系統中的隱藏文件，也是系統休眠文件。通常儲存在C盤根目錄下，其大小與系統安裝記憶體大小相當。這個檔案在電腦休眠時被使用，其中包含了當前系統的記憶體數據，以便在恢復時快速恢復到先前的狀態。由於其大小與記憶體容量相等，因此它可能會佔用較大的硬碟空間。 hiber
Linux系統查看log日誌指令詳解！
Mar 06, 2024 pm 03:55 PM
在Linux系統中，可以使用下列指令來查看日誌檔案的內容：tail指令：tail指令用來顯示日誌檔案的末尾內容。它是查看最新日誌資訊的常用命令。 tail[選項][檔案名稱]常用的選項包括：-n：指定要顯示的行數，預設為10行。 -f：即時監視文件內容，並在文件更新時自動顯示新的內容。範例：tail-n20logfile.txt#顯示logfile.txt檔案的最後20行內容tail-flogfile.txt#即時監視logfile.txt檔案的更新內容head指令：head指令用於顯示記錄檔的開頭
