看板 Knuckles_note
作者 標題 [JS] 單鍵縮圖上傳圖片 imgUpload - jQuery Plugin
時間 2015年02月17日 Tue. AM 10:15:26
參考前一篇 http://disp.cc/b/11-8uqn
單鍵上傳圖片，上傳前會將圖縮小為限制的大小
將程式改寫為 jQuery Plugin
GitHub: https://github.com/KnucklesHuang/imgUpload
範例頁: http://knuckles.disp.cc/github/imgUpload/imgUpload.html
使用方法
先在 HTML 建立一個按鈕，以及用來顯示上傳結果的 textarea
<style type="text/css">
.uploadBtn{
}
#upload-result{
}
</style>
<div class="uploadBtn">上傳圖片</div>
<textarea id="upload-result"></textarea>
.uploadBtn{
display: inline-block; width:80px; height: 26px; cursor: pointer;
background-color: red; color: black; font-size: 16px;
border: 1px solid black; border-color: rgba(0,0,0,0.25);
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
#upload-result{
width: 500px; height: 100px;
}
</style>
<div class="uploadBtn">上傳圖片</div>
<textarea id="upload-result"></textarea>
載入 jQuery
用 JavaScript 將上傳圖片按鈕加上 imgUpload
<script type="text/javascript">
$(function(){
});
</script>
$(function(){
//用來顯示上傳結果的 textarea
var uploadResult = document.getElementById('upload-result');
//使用單鍵上傳 jQuery plugin
$('.uploadBtn').imgUpload({
action: 'imgur_upload_base64.php', //接收上傳圖片的網頁，要回傳JSON檔
multiple: true, //允許選取多張圖片
maxWidth: 1000, //寬度限制最大1000px
maxHeight: 0, //高度不限制
//選取圖片後要做的事
onSubmit: function(id){
//在 textarea 插入一個上傳中的字串，上傳成功後再換成網址
//若一次上傳多張圖，可用 id 來分別不同的圖
var anchor_str = "[img "+id+" uploading...]\n";
uploadResult.value += anchor_str;
},
//上傳成功後要做的事
onComplete: function(responseJSON,id){
// resapnseJSON 為 action 網頁回傳的 JSON 檔
var data = responseJSON.data;
if(!responseJSON.success){ alert(data.error); }
//將 textarea 裡，上傳中的字串改成圖片網址
//若一次上傳多張圖，可用 id 來分別不同的圖
var anchor_str = "[img "+id+" uploading...]\n";
var bbcode = '[img='+data.width+'x'+data.height+']'+data.link+"[/img]\n";
uploadResult.value = uploadResult.value.replace(anchor_str,bbcode);
}
});
});
</script>
載入 imgUpload jQuery Plugin
<script type="text/javascript">
/*
* imgUpload - jQuery Plugin
* Copyright (c) 2015 Knuckles Huang - http://disp.cc/b/11-8uGt
*/
(function($){
})(jQuery);
</script>
/*
* imgUpload - jQuery Plugin
* Copyright (c) 2015 Knuckles Huang - http://disp.cc/b/11-8uGt
*/
(function($){
$.fn.imgUpload = function(options) {
options = $.extend({ //options 預設值
action: '', //上傳圖片的網址
multiple: true, //預設允許選取多張圖片
maxWidth: 1000, //寬度預設限制最大1000px
maxHeight: 0, //高度預設無限制
onSubmit: function(){}, //選好檔案時要做的事
onComplete: function(){} //上傳完成後要做的事
}, options);
var multiple = (options.multiple)? 'multiple' : '';
this.css({padding: 0, textAlign: 'left'});
var btnWidth = this.width(),
btnHeight = this.height();
var input = $(
'<input type="file" name="fileData[]" accept="image/*" '+multiple +'/>'
).css({
position: 'absolute', width: btnWidth, height: btnHeight,
opacity: 0, fontSize: 0, cursor: 'pointer'
});
var innertext = $(
'<div>'+this.html()+'</div>'
).css({
padding: '3px', textAlign: 'center', verticalAlign: 'middle'
});
this.empty().append(input).append(innertext);
input.on('click',function(){
this.value = null;
}).on('change',function(){
var files = this.files;
var i, file;
for(i=0; i<files.length; i++){
file = files[i];
if(!file.type.match(/image.*/)){
console.log('file '+(i+1)+' is not an image');
continue;
}
imgUpload(file, options);
}
});
return this;
};
function imgUpload(file, options){
var type = file.type;
var src = window.URL.createObjectURL(file);
//隨機產生一個id，用來辨別不同的上傳檔案
var id = Math.random().toString(36).substring(3,7);
options.onSubmit(id); //選好檔案時要做的事
var img = document.createElement("img");
img.src = src;
img.onload = function(){
var width = this.width,
height = this.height,
maxWidth = options.maxWidth,
maxHeight = options.maxHeight;
//寬或高大於設定的上限時，等比例縮小到符合上限
if(width > height){
if(maxWidth>0 && width>maxWidth){
height *= maxWidth / width;
width = maxWidth;
}
}else{
if(maxHeight>0 && height>maxHeight){
width *= maxHeight / height;
height = maxHeight;
}
}
//使用縮小後的寬高建立一個canvas
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
//將canvas轉為圖片的base64編碼
var dataurl = canvas.toDataURL(type);
//去掉 dataurl 開頭的 data:image/png;base64,
var base64 = dataurl.replace(/^data:image\/\w{3,4};base64,/,'');
//將圖片的base64編碼上傳至網站，將回傳的JSON傳至onComplete
$.post(options.action, {base64:base64}, function(responseText){
if(!responseText.match(/^[\{\[]/)){ alert(responseText); return; }
var responseJSON = JSON.parse(responseText);
//上傳完成後要做的事
options.onComplete(responseJSON,id);
},'text');
};
}
})(jQuery);
</script>
接收圖片網頁 imgur_upload_base64.php
<?php // imgur_upload_base64.php
$image_base64 = isset($_POST['base64'])? $_POST['base64'] : '';
if(!$image_base64){ die('base64 error'); }
$imgur_result = imgur_upload($image_base64);
echo $imgur_result;
//利用 Imgur API 上傳圖片的程式，請參考 http://disp.cc/b/11-8qWb
function imgur_upload(){ ... }
$image_base64 = isset($_POST['base64'])? $_POST['base64'] : '';
if(!$image_base64){ die('base64 error'); }
$imgur_result = imgur_upload($image_base64);
echo $imgur_result;
//利用 Imgur API 上傳圖片的程式，請參考 http://disp.cc/b/11-8qWb
function imgur_upload(){ ... }
--
※ 作者: Knuckles 時間: 2015-02-17 10:15:26
※ 編輯: Knuckles 時間: 2023-12-12 02:54:55 (台灣)
※ 同主題文章:
02-15 07:04 □ [JS] 單鍵上傳圖片 上傳前使用canvas縮圖
● 02-17 10:15 □ [JS] 單鍵縮圖上傳圖片 imgUpload - jQuery Plugin
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 3352
回列表(←)
分享