base64上傳頭像；php ajax前端壓縮圖片上傳；thinkphp5非同步上傳頭像
阿新 • • 發佈：2019-02-07
實現效果：點選頭像，直接選擇圖片，選完圖片，直接執行非同步上傳並替換圖片
相關知識點：php+ajax
亮點：如果選擇圖片較大，會在前端進行壓縮上傳，有利於提高上傳速度和減輕伺服器壓力
html程式碼比較簡單，實際上就是用絕對定位將上傳框定位到圖片上層，並將背景透明化即可，即實現了點選圖片實際上是觸發上傳框效果，不做贅述
<img src="__HOMESTYLE__/images/pic110.jpg"> <input type="file" id="file" onchange="preview(this)" /> <script type="text/javascript"> function preview(file){ var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function(evt){ UpladFile(); //檔案上傳框選擇檔案觸發上傳程式 prevDiv.innerHTML = '<img src="' + evt.target.result + '" />'; } reader.readAsDataURL(file.files[0]); }else{ prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>'; } } </script> <h6 class="text-center"> <a>修改頭像</a></h6>
上傳頭像以壓縮程式碼：（layer.msg 是借用了第三方彈窗外掛，具體使用方式請移步 http://layer.layui.com/）
<script> function photoCompress(file,w,objDiv){ var ready=new FileReader(); /*開始讀取指定的Blob物件或File物件中的內容. 當讀取操作完成時,readyState屬性的值會成為DONE,如果設定了onloadend事件處理程式,則呼叫之.同時,result屬性中將包含一個data: URL格式的字串以表示所讀取檔案的內容.*/ ready.readAsDataURL(file); ready.onload=function(){ var re=this.result; canvasDataURL(re,w,objDiv) } } function canvasDataURL(path, obj, callback){ var img = new Image(); img.src = path; img.onload = function(){ var that = this; // 預設按比例壓縮 var w = that.width, h = that.height, scale = w / h; w = obj.width || w; h = obj.height || (w / scale); var quality = 0.7; // 預設圖片質量為0.7 //生成canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 建立屬性節點 var anw = document.createAttribute("width"); anw.nodeValue = w; var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anw); canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 影象質量 if(obj.quality && obj.quality <= 1 && obj.quality > 0){ quality = obj.quality; } // quality值越小，所繪製出的影象越模糊 var base64 = canvas.toDataURL('image/jpeg', quality); // 回撥函式返回base64的值 callback(base64); } } /** * 將以base64的圖片url資料轉換為Blob * @param urlData * 用url方式表示的base64圖片資料 */ function convertBase64UrlToBlob(urlData){ var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } var xhr; //上傳檔案方法 function UpladFile(){ layer.msg('圖片上傳中'); var fileObj = document.getElementById("file").files[0]; // js 獲取檔案物件 var url = "{:url('home/member/touxiang_upload')}"; // 接收上傳檔案的後臺地址 var form = new FormData(); // FormData 物件 if(fileObj.size/1024 > 1025) { //大於1M，進行壓縮上傳 photoCompress(fileObj, { quality: 0.2 }, function(base64Codes){ var bl = convertBase64UrlToBlob(base64Codes); form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 檔案物件 xhr = new XMLHttpRequest(); // XMLHttpRequest 物件 xhr.open("post", url, true); //post方式，url為伺服器請求地址，true 該引數規定請求是否非同步處理。 xhr.onload = uploadComplete; //請求完成 xhr.onerror = uploadFailed; //請求失敗 xhr.upload.onloadstart = function(){ ot = new Date().getTime(); oloaded = 0; }; xhr.send(form); //開始上傳，傳送form資料 }); }else{ //小於等於1M 原圖上傳 form.append("file", fileObj); // 檔案物件 xhr = new XMLHttpRequest(); // XMLHttpRequest 物件 xhr.open("post", url, true); //post方式，url為伺服器請求地址，true 該引數規定請求是否非同步處理。 xhr.onload = uploadComplete; //請求完成 xhr.onerror = uploadFailed; //請求失敗 xhr.upload.onloadstart = function(){ ot = new Date().getTime(); oloaded = 0; }; xhr.send(form); //開始上傳，傳送form資料 } } //上傳成功響應 function uploadComplete(evt) { //服務斷接收完檔案返回的結果 var data = JSON.parse(evt.target.responseText); if(data == 1) { layer.msg('圖片上傳成功'); }else if(data == -3){ layer.msg('檔案型別不正確或檔案偏大'); }else if(data == -4){ layer.msg('圖片上傳失敗'); } } //上傳失敗 function uploadFailed(evt) { layer.msg('圖片上傳失敗'); } </script>
後端處理程式碼：後端處理的時候因為前端頭像畫素是91px*91px，所以又用了thumb方法生成了縮圖，並返回縮圖給前端顯示
public function touxiang_upload(){ if(isset($_FILES) && !empty($_FILES)){ // 移動到框架應用根目錄/public/uploads/ 目錄下 if($_FILES["file"]["error"]){ return ['code'=>-1,'msg'=>$_FILES["file"]["error"]]; }else{ //加限制條件 //判斷上傳檔案型別為png或jpg且大小不超過2048000B if(($_FILES["file"]["type"]=="image/png"||$_FILES["file"]["type"]=="image/jpeg") && $_FILES["file"]["size"]<2048000){ //防止檔名重複 $file_name_array = explode(".",$_FILES['file']['name']); $name = rand(1000,9999).time().rand(1000,9999).".".$file_name_array[1]; $name_file = ROOT_PATH."uploads/touxiang/".$name; //檢查檔案或目錄是否存在 if(file_exists($name_file)){ echo -2; //該檔案已存在，需讓使用者重新上傳 }else{ //儲存檔案, move_uploaded_file 將上傳的檔案移動到新位置 move_uploaded_file($_FILES["file"]["tmp_name"],$name_file);//將臨時地址移動到指定地址 $image = \think\Image::open(ROOT_PATH.'/uploads/touxiang/'.$name); $image->thumb(91, 91,\think\Image:: THUMB_SCALING)->save(ROOT_PATH.'/uploads/touxiang/thumb_'.($name)); $thumb_img = '/thumb_'.($name); $update_data = [ 'headimg'=>str_replace('\\', "/", $thumb_img) ]; $update_effect = Db::name("member")->where('id',$member_id)->update($update_data); if($update_effect){ echo 1; //上傳成功 }else{ echo -4; //上傳失敗 } } }else{ echo -3; //檔案型別不正確或檔案偏大 } } } }