溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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 href="https://cdnjs.cloudflare.com/ajax/libs/layer/2.3/skin/layer.css" 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 > <!-- 內層div 逐漸遞增的進度條 --> <div id="jdt" ></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代碼如下：
<?php
header('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;
}
參考資料: https://www.jb51.net/article/94853.htm
更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
