示例
html
<form name="form1" method="post" action="xxxxx" onSubmit="return chkfrm(this);" >
<img src="/images/download.jpg" class="img-circle" />
<input type="file" id="headimgurl" name='headimgurl' accept="image/*" style="display:none" value=""/>
<input type="text" id="logopicbase" name='logopicbase' style="display:none" value=""/>
</form>
jq
$(".img-circle").click(function () {
$("#headimgurl").click(); //隱藏了input:file樣式後，點擊頭像就可以本地上傳
$("#headimgurl").on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //獲取圖片的路徑，該路徑不是圖片在本地的路徑
if (objUrl) {
$(".img-circle").attr("src", objUrl) ; //將圖片路徑存入src中，顯示出圖片
var image = new Image();
image.crossOrigin = '';
image.src = objUrl;
image.onload = function(){
var base64 = getBase64Image(image);
// console.log(base64);
$("#logopicbase").val(base64) ;
};
var file = $("#headimgurl") ;//清空input的file值
file.after(file.clone().val(""));
file.remove();
}else{
layer.open({
content: '上傳錯誤',
time: 2
});
}
});
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//生成圖片的base64編碼
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// 按比例壓縮2倍
var rate = (width<height ? width/height : height/width)/2;
//原比例生成畫布圖片
// var rate = 1;
canvas.width = width*rate;//畫布寬
canvas.height = height*rate;
// console.log(canvas);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
php
if (!empty($_POST['logopicbase'])) {
$base64_image_content = $_POST['logopicbase'];
//匹配出圖片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)) {
$type = $result[2];
$new_file_date = date('Ymd', time());
$new_file = "./uploads/image/" . $new_file_date . "/";//文件存儲位置
if (!file_exists($new_file)) {
//檢查是否有該文件夾，如果沒有就創建，並給予最高權限
mkdir($new_file, 0700);
}
$time = time();
$new_file = $new_file . $time . ".{$type}";
$src = "/uploads/image/" . $new_file_date . "/". $time . ".{$type}";
//生成圖片file_put_contents(filename,data);filename:要被寫入數據的文件名;data要寫入的數據。類型可以是 string，array 或者是 stream 資源
//$base64_string= explode(',', $base64_string); //截取data:image/png;base64, 這個逗號後的字符
//$data= base64_decode($base64_string[1]); //對截取後的字符使用base64_decode進行解碼
if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))) {
$rootPath =__ROOT__.$src;
$data['headimgurl']=$rootPath;//將修改後路徑存到數據庫
} else {
$this->error('圖片保存失敗',U('index',array('wsid'=>$wsshop['id'])));
}
}
unset($_POST['logopicbase']);
}
上傳多張圖片示例
html
<form>
<p>曬曬你的圖片</p>
<img src="/imgs/add-button.jpg" id="{$vo['gid']}" class="img-circle" data-id="{$vo['id']}">
<input type="file" id="compic{$vo['id']}" name="compic{$vo['id']}" accept="image/*" style="display:none" value=""/>
<input type="text" id="compicbase{$vo['id']}" name="compicbase{$vo['id']}" style="display:none" value=""/>
<div class="showpics{$vo['id']}">
</div>
</form>
jq
$(".img-circle").click(function () {
var id= $(this).data("id");
var gid = $(this).attr("id");
var countimg = $(".showpics"+id+" > img").length;
if(countimg>=8){
alert('最多隻能上傳8張圖片');
}else{
$("#compic"+id).click(); //隱藏了input:file樣式後，點擊頭像就可以本地上傳
$("#compic"+id).on("change",function(){
var objUrl = getObjectURL(this.files[0]) ; //獲取圖片的路徑，該路徑不是圖片在本地的路徑
if (objUrl) {
// $("#showpic"+id).attr("src", objUrl) ; //將圖片路徑存入src中，顯示出圖片
var image = new Image();
image.crossOrigin = '';
image.src = objUrl;
image.onload = function(){
var base64 = getBase64Image(image);
// console.log(base64);
// $("#logopicbase"+id).val(base64) ;
var showimg = "<img src='"+objUrl+"' class='img-thumbnail'>";//添加圖片顯示
showimg += "<input type='text' name='compicbase"+gid+"[]' value='"+base64+"' style='display: none;'>";//添加post傳值
$(".showpics"+id).append(showimg);//顯示
};
var file = $("#compic") ;//清空input 的file值,否則會出現第一次一張,第二次兩張,3次3張....
file.after(file.clone().val(""));
file.remove();
}
});
}
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
//生成圖片的base64編碼
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// 按比例壓縮2倍
var rate = (width<height ? width/height : height/width)/2;
//原比例生成畫布圖片
// var rate = 1;
canvas.width = width*rate;//畫布寬
canvas.height = height*rate;
// console.log(canvas);
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height, 0, 0, width * rate, height * rate);
//img:規定要使用的圖像、畫布或視頻。; 0, 0,:x y座標起始剪切位置; width, height,:可選。被剪切圖像的寬高度
// 0, 0,:在畫布上放置圖像的 x y座標位置;width * rate, height * rate:可選。要使用的圖像的寬高度。（伸展或縮小圖像）
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
var dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}