此篇介紹JSG.ImageUploader多張圖片上傳工具,本人使用Docker這套軟體來完成,各位可以參考[Docker學習筆記]Apache-php5.6與Mariadb安裝,來完成相關架設,先在\Kitematic\apache-php56\var\www路徑下新增jsg-image-uploader資料夾,本人會結合CKFinder一起使用,可以參考[網頁技巧學習筆記]CKFinder檔案路徑選擇與顯示,處理完成後jsg-image-uploader資料夾的內容如下,
再來下載兩個必要的.js,
並在jsg-image-uploader資料夾下建立js資料夾來存放,如下所示,
下載必要的工具JSG.ImageUploader.zh-tw,只需要移植images資料夾與JSG.ImageUploader.js,
在jsg-image-uploader資料夾下建立index.html與demo_upload.php這兩隻程式,如下所示,
index.html程式如下,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ckfinder</title>
<script src="ckfinder/ckfinder.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/JSG.ImageUploader.js"></script>
<style type="text/css">
h2{
background-color: #FFE097;
margin-top: 0;
}
#upload_block{
border: 5px solid #FFB300;
height: 230px;
}
.JSGImgPreview{
float: left;
background: url() no-repeat center 50% #FFFAD9;
width: 160px;
height: 120px;
border: solid 1px #0080FF;
margin: 0 5px;
}
</style>
</head>
<body>
<div id="upload_block">
<h2>可上傳3張圖</h2>
<div id="preview_block"></div>
<div style="clear: both;">
<span id="image_input_block"></span>
</div>
</div>
<div>
<img id="image_display" style="display:none" src="" width="400" height="300">
</div>
<a id="select_ckfinder" href="javascript:void(0)">選擇圖片/上傳圖片</a>
<div id="image_url"></div>
</body>
</html>
<script>
var select = document.getElementById('select_ckfinder');
select.onclick = function(){
selectFileWithCKFinder();
};
function selectFileWithCKFinder(){
var finder = new CKFinder();
finder.selectActionFunction = function(fileUrl, data) {
$("#image_display").attr('src',fileUrl);
$("#image_display").show();
document.getElementById('image_url').textContent = fileUrl;
};
finder.popup();
}
</script>
<script>
$(function() {
myImageUploader1 = new JSG.imgUploader({
fileLimits: 3,
actionUrl: 'demo_upload.php',
inputContainer: 'image_input_block',
previewContainer: 'preview_block',
});
});
</script>
demo_upload.php程式如下,
<?php
// 取得上傳圖片
$src = imagecreatefromjpeg($_FILES['myfile']['tmp_name']);
// 取得來源圖片長寬
$src_w = imagesx($src);
$src_h = imagesy($src);
// 假設要長寬不超過90
if($src_w > $src_h){
$thumb_w = 160;
$thumb_h = intval($src_h / $src_w * 160);
}else{
$thumb_h = 120;
$thumb_w = intval($src_w / $src_h * 120);
}
// 建立縮圖
$thumb = imagecreatetruecolor($thumb_w, $thumb_h);
// 開始縮圖
imagecopyresampled($thumb, $src, 0, 0, 0, 0, $thumb_w, $thumb_h, $src_w, $src_h);
// 儲存縮圖到指定 thumb 目錄
imagejpeg($thumb, "./ckfinder/userfiles/images/".$_FILES['myfile']['name']);
$rtn = array('success' => "./ckfinder/userfiles/images/".$_FILES['myfile']['name']);
echo json_encode($rtn);
?>
打開Docker,啟動apache-php56,開啟網頁,如下所示,
來嘗試上傳圖片
並用底下選擇圖片/上傳圖片,來查看圖片是否存入正確位置,
留言列表
