摘要:文章首發(fā)于藍(lán)鍋鍋博客主要是用到的接口,既然是的,所支持的瀏覽器我就不多說(shuō)啦,老生常談的問(wèn)題了,遠(yuǎn)離,珍惜生命。目錄路徑為目錄路徑為文章首發(fā)于藍(lán)鍋鍋博客,歡迎交流,共同進(jìn)步。
</>復(fù)制代碼
我們?cè)陂_(kāi)發(fā)系統(tǒng)時(shí),處理圖片上傳是不可避免的,例如使用thinkphp的肯定很熟悉import("@.ORG.UploadFile");的上傳方式,今天我們來(lái)講一個(gè)使用html5 base64上傳圖片的方法。
文章首發(fā)于藍(lán)鍋鍋博客:http://lanchenglv.com/article...
主要是用到html5 FileReader的接口,既然是html5的,所支持的瀏覽器我就不多說(shuō)啦,老生常談的問(wèn)題了,遠(yuǎn)離IE,珍惜生命。
先扔個(gè)demo出來(lái)給大伙體驗(yàn)體驗(yàn)哈。
http://t.lanchenglv.com/lan/i...
PS:主要給大伙體驗(yàn)的,別當(dāng)網(wǎng)盤(pán)儲(chǔ)存圖片哈,定期自動(dòng)刪除圖片的。
可以大概的講一下思路,其實(shí)也挺簡(jiǎn)單。選擇了圖片之后,js會(huì)先把已選的圖片轉(zhuǎn)化為base64格式,然后通過(guò)ajax上傳到服務(wù)器端,服務(wù)器端再轉(zhuǎn)化為圖片,進(jìn)行儲(chǔ)存的一個(gè)過(guò)程。
咱們先看看前端的代碼。
html部分
</>復(fù)制代碼
js部分
</>復(fù)制代碼
$("#imagesfile").change(function (){
var file = this.files[0];
//用size屬性判斷文件大小不能超過(guò)5M ,前端直接判斷的好處,免去服務(wù)器的壓力。
if( file.size > 5*1024*1024 ){
alert( "你上傳的文件太大了!" )
}
//好東西來(lái)了
var reader=new FileReader();
reader.onload = function(){
// 通過(guò) reader.result 來(lái)訪問(wèn)生成的 base64 DataURL
var base64 = reader.result;
//打印到控制臺(tái),按F12查看
console.log(base64);
//上傳圖片
base64_uploading(base64);
}
reader.readAsDataURL(file);
});
//AJAX上傳base64
function base64_uploading(base64Data){
$.ajax({
type: "POST",
url: "上傳接口路徑",
data: {
"base64": base64Data
},
dataType: "json",
timeout: 50000,
success: function(data){
console.log(data);
},
complete:function() {},
error: function(xhr, type){
alert("上傳超時(shí)啦,再試試");
}
});
}
其實(shí)前端的代碼也并不復(fù)雜,主要是使用了new FileReader();的接口來(lái)轉(zhuǎn)化圖片,new FileReader();還有其他的接口,想了解更多的接口使用的童鞋,自行谷歌搜索new FileReader();。
接下來(lái),那就是服務(wù)器端的代碼了,上面的demo,是用thinkphp為框架編寫(xiě)的,但其他框架也基本通用的。
</>復(fù)制代碼
function base64imgsave($img){
//文件夾日期
$ymd = date("Ymd");
//圖片路徑地址
$basedir = "upload/base64/".$ymd."";
$fullpath = $basedir;
if(!is_dir($fullpath)){
mkdir($fullpath,0777,true);
}
$types = empty($types)? array("jpg", "gif", "png", "jpeg"):$types;
$img = str_replace(array("_","-"), array("/","+"), $img);
$b64img = substr($img, 0,100);
if(preg_match("/^(data:s*image/(w+);base64,)/", $b64img, $matches)){
$type = $matches[2];
if(!in_array($type, $types)){
return array("status"=>1,"info"=>"圖片格式不正確,只支持 jpg、gif、png、jpeg哦!","url"=>"");
}
$img = str_replace($matches[1], "", $img);
$img = base64_decode($img);
$photo = "/".md5(date("YmdHis").rand(1000, 9999)).".".$type;
file_put_contents($fullpath.$photo, $img);
$ary["status"] = 1;
$ary["info"] = "保存圖片成功";
$ary["url"] = $basedir.$photo;
return $ary;
}
$ary["status"] = 0;
$ary["info"] = "請(qǐng)選擇要上傳的圖片";
return $ary;
}
以上就是PHP代碼,原理也很簡(jiǎn)單,拿到接口上傳的base64,然后再轉(zhuǎn)為圖片再儲(chǔ)存。
建了一個(gè)github庫(kù),需要源碼體驗(yàn)的童鞋可以clone來(lái)體驗(yàn)體驗(yàn)。
https://github.com/bluefox168...
使用的是thinkphp 3.2,無(wú)需數(shù)據(jù)庫(kù),PHP環(huán)境直接運(yùn)行即可。
php目錄路徑為:
</>復(fù)制代碼
?ApplicationHomeControllerBase64Controller.class.php
html目錄路徑為:
</>復(fù)制代碼
ApplicationHomeViewBase64imagesupload.html
文章首發(fā)于藍(lán)鍋鍋博客,歡迎交流,共同進(jìn)步。
http://lanchenglv.com/article...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/21995.html
摘要:文章首發(fā)于藍(lán)鍋鍋博客主要是用到的接口,既然是的,所支持的瀏覽器我就不多說(shuō)啦,老生常談的問(wèn)題了,遠(yuǎn)離,珍惜生命。目錄路徑為目錄路徑為文章首發(fā)于藍(lán)鍋鍋博客,歡迎交流,共同進(jìn)步。 我們?cè)陂_(kāi)發(fā)系統(tǒng)時(shí),處理圖片上傳是不可避免的,例如使用thinkphp的肯定很熟悉import(@.ORG.UploadFile);的上傳方式,今天我們來(lái)講一個(gè)使用html5 base64上傳圖片的方法。文章首發(fā)于藍(lán)...
摘要:對(duì)于圖片上傳,大家一定不陌生。項(xiàng)目地址一環(huán)境搭建本項(xiàng)目使用目前最新的和進(jìn)行開(kāi)發(fā),所以環(huán)境的搭建必不可少。在目錄下新建代碼內(nèi)容只有行,其輸入為一個(gè)圖片文件,輸出為一串編碼。同樣的方式,我們可以為也設(shè)置一個(gè)代理數(shù)組,以實(shí)現(xiàn)向外拋出數(shù)組的目的。 對(duì)于圖片上傳,大家一定不陌生。最近工作中遇到了關(guān)于圖片上傳的內(nèi)容,借此機(jī)會(huì)認(rèn)真研究了一番,遂一發(fā)不可收拾,最后琢磨了一個(gè)東西出來(lái)。在開(kāi)發(fā)的過(guò)程中有不...
閱讀 3034·2021-11-24 09:39
閱讀 2271·2021-10-08 10:05
閱讀 2762·2021-09-24 13:52
閱讀 1580·2021-09-22 15:07
閱讀 598·2019-08-30 15:55
閱讀 1818·2019-08-30 15:53
閱讀 698·2019-08-30 15:44
閱讀 3125·2019-08-30 11:20
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要