本文實例講述了jquery+ajax實現(xiàn)上傳圖片并顯示上傳進度功能。分享給大家供大家參考，具體如下：
jquery上傳文件用的formdata，上傳進度條需要添加xhr的onprogress
html代碼如下：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Ding Jianlong Html</title> <link rel="external nofollow" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/layer.js"></script></head><body> <!-- 外層div 進度條的整體視覺和位置設置 --> <div style="width:300px;height: 20px;border: 1px solid #CCC;"> <!-- 內層div 逐漸遞增的進度條 --> <div id="jdt" style="height: 20px;"></div> </div> <p>總大小<span id="total"></span>；已上傳<span id="loaded"></span>；</p><br> <form id="mainForm"> 選擇文件：<input type="file" name="file"> <input type="button" value="上傳" onclick="upload()"> </form><script> var uploading = false; function upload(){ //首先封裝一個方法 傳入一個監(jiān)聽函數(shù) 返回一個綁定了監(jiān)聽函數(shù)的XMLHttpRequest對象 var xhrOnProgress=function(fun) { xhrOnProgress.onprogress = fun; //綁定監(jiān)聽 //使用閉包實現(xiàn)監(jiān)聽綁 return function() { //通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象 var xhr = $.ajaxSettings.xhr(); //判斷監(jiān)聽函數(shù)是否為函數(shù) if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有監(jiān)聽函數(shù)并且xhr對象支持綁定時就把監(jiān)聽函數(shù)綁定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } } var data = new FormData($('#mainForm')[0]); //要加【0】 console.log(data); if(uploading){ layer.alert("文件正在上傳中，請稍候"); return false; } $.ajax({ type: 'POST', url: 'upload_file.php', //當前路徑 data: data, dataType: 'json', processData: false, //序列化，no contentType: false, //不設置內容類型 beforeSend: function(){ uploading = true; }, //進度條要調用原生xhr xhr:xhrOnProgress(function(evt){ var percent = Math.floor(evt.loaded / evt.total*100);//計算百分比 console.log(percent); // 設置進度條樣式 $('#jdt').css('width',percent * 3 + 'px'); $('#jdt').css('background','skyblue'); //顯示進度百分比 $('#jdt').text(percent+'%'); $('#loaded').text(evt.loaded/1024 + 'K'); $('#total').text(evt.total/1024 + 'K'); }), success: function (data) { if (data.code == 200) { layer.msg(data.message, {icon: 1, time: 1000}); //成功后關閉修改頁 setTimeout(function(){ var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe的索引 parent.layer.close(index); //在執(zhí)行關閉 } ,2000); //還有刷新下iframe的界面 parent.location.reload(); } else { layer.msg(data.message, {icon: 2, time: 3000}); } uploading = false; }, error: function (data) { alert('服務異常，請稍后重試'); console.log(data); } }); }</script></body></html>
新聞熱點
疑難解答
圖片精選
