本文實例講述了jquery+ajax實現上傳圖片并顯示上傳進度功能。分享給大家供大家參考，具體如下：
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(){ //首先封裝一個方法 傳入一個監聽函數 返回一個綁定了監聽函數的XMLHttpRequest對象 var xhrOnProgress=function(fun) { xhrOnProgress.onprogress = fun; //綁定監聽 //使用閉包實現監聽綁 return function() { //通過$.ajaxSettings.xhr();獲得XMLHttpRequest對象 var xhr = $.ajaxSettings.xhr(); //判斷監聽函數是否為函數 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; //如果有監聽函數并且xhr對象支持綁定時就把監聽函數綁定上去 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); //在執行關閉 } ,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>php代碼如下：
<?phpheader('content-type:text/html;charset=utf-8');if ($_FILES["file"]["error"] > 0){ echo "Return Code: " . $_FILES["file"]["error"] . "<br />";}else{ // 文件中文轉碼 //iconv('utf-8', 'gbk', $_FILES["file"]["name"]); //取出后綴名 $ext = strrchr($_FILES["file"]["name"],'.'); move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . uniqid() . $ext); $arr['code'] = 666; $arr['message'] = "已經保存到: " . "upload/" . uniqid() . $ext; echo json_encode($arr);die;}參考資料: http://www.49028c.com/article/94853.htm
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
