溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了jquery實現上傳文件進度條的具體代碼，供大家參考，具體內容如下
首先引入需要的js css
用bootstrap進度條
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" > <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery.form.js"></script>
前端頁面
<form id="uploadFile" action="uploadFile" enctype="multipart/form-data"> <input type="file" name="file"> <input type="button" value="上傳" id="uplodsss"> </form> <div class="progress"> <div id="uploadFile_progressBar" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" > <span id="uploadFile_rate">0%</span> </div> </div>
js
<script type="text/javascript">
$(function(){
$("#uplodsss").click(function(){
debugger
$('#uploadFile').ajaxSubmit({
type:'post',
url:"uploadFile",
processData: false, //需設置為false,因為data值是FormData對象，不需要對數據做處理
contentType: false, //需設置為false,因為是FormData對象，且已經聲明了屬性enctype="multipart/form-data"
resetForm: true, //成功提交后，是否重置所有表單元素的值
uploadProgress: function (event, position, total, percentComplete) {
if(percentComplete > 100){
percentComplete = 100;
}
var percentVal = percentComplete + '%';
$("#uploadFile_rate").html(percentVal); // 文件上傳進度顯示值
$("#uploadFile_progressBar").width(percentVal); // 進度條狀態
},
success:function(data){
alert("上傳文件成功！");
$("#uploadFile_progressBar").width("0px"); // 進度條狀態
$("#uploadFile_rate").html("0%");
},
error:function(){
alert("上傳文件失敗，請重試！");
}
});
});
})
</script>
需要jquery.form.js，下載地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
