<!DOCTYPE HTML PUBLIC> <html> <head> <meta charset="utf-8"> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <title>HTML5按比例縮略圖片並上傳的實例</title> <style type="text/css"> body{margin: 0px; background:#f2f2f0;} .title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;} .main{margin:10px auto 10px auto; text-align:center;} .main .file{padding-left:100px;} .showimg{margin:10px auto 10px auto; text-align:center;} </style> <script type="text/javascript"> window.onload = function(){ // 上傳按鈕事件 document.getElementById('upload').onclick = function(){ // 圖片上傳控件 var img = document.getElementById('img').files[0]; // 縮略尺寸 var width = document.getElementById('width').value; var height = document.getElementById('height').value; // 判斷是否選擇圖片 if(!img){ alert('請先選擇圖片'); return ; } // 判斷圖片格式 if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){ alert('圖片只能是jpg,gif,png格式'); return ; } // 判斷width,height if(isNaN(parseInt(width)) || isNaN(parseInt(height))){ alert('寬或高不正確'); return ; } // 縮略圖片並上傳 resize(img, width, height, upload); } // 縮略圖片 function resize(img, width, height, callback){ // 創建臨時圖片對象 var image = new Image; // 創建畫布 var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); // 臨時圖片加載 image.onload = function(){ // 圖片尺寸 var img_w = image.naturalWidth; var img_h = image.naturalHeight; // 縮略后尺寸 var dimg_w; var dimg_h; // 計算縮略尺寸 dimg_w = width; dimg_h = Math.ceil(dimg_w*img_h/img_w); if(dimg_h>height){ dimg_h = height; dimg_w = Math.ceil(dimg_h*img_w/img_h); } // 定義畫布尺寸 canvas.width = dimg_w; canvas.height = dimg_h; // 在畫布上按縮略尺寸畫圖 context.drawImage(image, 0, 0, dimg_w, dimg_h); // 獲取畫布數據 var imgdata = canvas.toDataURL(img.type); // 將畫布數據回調返回 if(typeof(callback)==='function'){ callback(imgdata); } } // file reader var reader = new FileReader(); reader.readAsDataURL(img); reader.onload = function(e){ image.src = reader.result; } } // 上傳圖片 var upload = function(imgdata){ $.post("server.php", {img: imgdata}, function(ret){ if(ret.img!=''){ $('#showimg').html('<a href="' + ret.img + '" target="_blank"><img src="' + ret.img + '"></a>'); }else{ alert('upload fail'); } }, 'json'); } } </script> </head> <body> <p class="title">HTML5按比例縮略圖片並異步上傳的實例</p> <div class="main"> <p class="file">圖片：<input type="file" id="img"></p> <p>寬：<input type="text" id="width" value="320"></p> <p>高：<input type="text" id="height" value="240"></p> <p><input type="button" id="upload" value="按比例縮略圖片並上傳"></p> </div> <p class="showimg" id="showimg"></p> </body> </html>
$img = isset($_POST['img'])? $_POST['img'] : ''; // 獲取圖片 list($type, $data) = explode(',', $img); // 判斷類型 if(strstr($type,'image/jpeg')!=''){ $ext = '.jpg'; }elseif(strstr($type,'image/gif')!=''){ $ext = '.gif'; }elseif(strstr($type,'image/png')!=''){ $ext = '.png'; } // 生成的文件名 $photo = time().$ext; // 生成文件 file_put_contents($photo, base64_decode($data), true); // 返回 header('content-type:application/json;charset=utf-8'); $ret = array('img'=>$photo); echo json_encode($ret);