Thinkphp5+plupload實(shí)現(xiàn)的圖片上傳功能示例【支持實(shí)時(shí)預(yù)覽】
更新時(shí)間：2019年05月08日 12:06:11 作者：Yxh_blogs
這篇文章主要介紹了Thinkphp5+plupload實(shí)現(xiàn)的圖片上傳功能,結(jié)合具體實(shí)例形式分析了thinkPHP5結(jié)合plupload實(shí)現(xiàn)可支持實(shí)時(shí)預(yù)覽的圖片上傳功能相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了Thinkphp5+plupload實(shí)現(xiàn)支持實(shí)時(shí)預(yù)覽的圖片上傳功能。分享給大家供大家參考，具體如下：
今天和大家分享一個(gè)國外的圖片上傳插件，這個(gè)插件支持分片上傳大文件。其中著名的七牛云平臺的jssdk就使用了puupload插件，可見這個(gè)插件還是相當(dāng)牛叉的。
這個(gè)插件不僅僅支持圖片上傳，還支持大多數(shù)文件的上傳，例如視頻文件，音頻文件，word文件等等，而且大文件都采用分片上傳的機(jī)制。
Plupload有以下功能和特點(diǎn)：
1、擁有多種上傳方式：HTML5、flash、silverlight以及傳統(tǒng)的<input type=”file” />。Plupload會(huì)自動(dòng)偵測當(dāng)前的環(huán)境，選擇最合適的上傳方式，并且會(huì)優(yōu)先使用HTML5的方式。所以你完全不用去操心當(dāng)前的瀏覽器支持哪些上傳方式，Plupload會(huì)自動(dòng)為你選擇最合適的方式。
2、支持以拖拽的方式來選取要上傳的文件
3、支持在前端壓縮圖片，即在圖片文件還未上傳之前就對它進(jìn)行壓縮
4、可以直接讀取原生的文件數(shù)據(jù)，這樣的好處就是例如可以在圖片文件還未上傳之前就能把它顯示在頁面上預(yù)覽
5、支持把大文件切割成小片進(jìn)行上傳，因?yàn)橛行g覽器對很大的文件比如幾G的一些文件無法上傳。
下面就介紹一個(gè)tp5整合plupload圖片上傳插件的小案例，希望給大家?guī)硪稽c(diǎn)小幫助。
一、案例目錄結(jié)構(gòu)
二、Index.php控制器方法
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class Index extends Controller{
public function index(){
$rootUrl = $this->request->root(true); //ROOT域名
$rootUrl = explode('index.php',$rootUrl)[0];
//模板資源變量分配
foreach (config('TMPL_PARSE_STRING') as $key => $value) {
$this->view->assign('_'.$key,$rootUrl.$value);
}
return $this->fetch();
}
//圖片上傳方法
public function upload_images(){
if($this->request->isPost()){
//接收參數(shù)
$images = $this->request->file('file');
//計(jì)算md5和sha1散列值，TODO::作用避免文件重復(fù)上傳
$md5 = $images->hash('md5');
$sha1= $images->hash('sha1');
//判斷圖片文件是否已經(jīng)上傳
$img = Db::name('picture')->where(['md5'=>$md5,'sha1'=>$sha1])->find();//我這里是將圖片存入數(shù)據(jù)庫，防止重復(fù)上傳
if(!empty($img)){
return json(['status'=>1,'msg'=>'上傳成功','data'=>['img_id'=>$img['id'],'img_url'=>$this->request->root(true).'/'.$img['path']]]);
}else{
// 移動(dòng)到框架應(yīng)用根目錄/public/uploads/picture/目錄下
$imgPath = 'public' . DS . 'uploads' . DS . 'picture';
$info = $images->move(ROOT_PATH . $imgPath);
$path = 'public/uploads/picture/'.date('Ymd',time()).'/'.$info->getFilename();
$data = [
'path' => $path ,
'md5' => $md5 ,
'sha1' => $sha1 ,
'status' => 1 ,
'create_time' => time() ,
];
if($img_id=Db::name('picture')->insertGetId($data)){
return json(['status'=>1,'msg'=>'上傳成功','data'=>['img_id'=>$img_id,'img_url'=>$this->request->root(true).'/'.$path]]);
}else{
return json(['status'=>0,'msg'=>'寫入數(shù)據(jù)庫失敗']);
}
}
}else{
return ['status'=>0,'msg'=>'非法請求!'];
}
}
}
三、index.html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tp5+plupload圖片上傳</title>
</head>
<body>
<!-- production -->
<!--<script type="text/javascript" src="./plupload.full.min.js"></script>-->
<!-- debug-->
<script type="text/javascript" src="{$_plupload}/moxie.js"></script>
<script type="text/javascript" src="{$_plupload}/plupload.dev.js"></script>
<script type="text/javascript" src="{$_plupload}/jquery.min.js"></script>
<style>
ul{
list-style:none;
}
#file-list {overflow: hidden;padding-left: initial;}
#file-list li {
width:160px;
float: left;
height:200px;
position: relative;
height: inherit;
margin-bottom: inherit;
}
#file-list li a {
width:150px;
height:150px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin:0 auto;
border:1px solid #ccc;
padding: 5px 5px 5px 5px;
}
.close{
background-image: url("{$_plupload}/close.png");
width: 30px;
height: 30px;
background-size: contain;
position: absolute;
right: 2%;
top: 0;
}
#file-list li a img {max-width:100%;max-height: 100%;}
.progress{
position: absolute;
background-color: rgba(4, 4, 4, 0.53);
color: #fff;
padding: 3px 3px 3px 3px;
border-radius: 10%;
}
</style>
<input type="hidden" id="images_upload" name="images" value=""/>
<div id="container">
<button class="btn btn-primary" type="button" id="pickfiles" style="height: 30px;line-height: 8px;">選擇圖片</button>
<button class="btn btn-primary" type="button" id="uploadfiles" style="display: none">開始上傳</button>
<ul id="file-list">
</ul>
</div>
<script type="text/javascript">
//調(diào)用例子
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',//上傳方式順序優(yōu)先級
browse_button : 'pickfiles',//選擇圖片按鈕id
container: document.getElementById('container'),//容器
url : "{:url('Index/upload_images')}",//服務(wù)器接口地址
flash_swf_url : "{$_plupload}/Moxie.swf",
silverlight_xap_url : "{$_plupload}/Moxie.xap",
multi_selection: true,//false為單圖上傳，true為多圖上傳
filters : {
max_file_size : '100mb',//限制文件上傳大小
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},//限制文件上傳格式
]
},
init: {
//init事件發(fā)生后觸發(fā)
PostInit: function() {
//document.getElementById('filelist').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {//文件選擇之后的觸發(fā)的方法
var len = len = files.length;
for(var i = 0; i<len; i++){
var file_name = files[i].name; //文件名
var file_size = files[i].size;//文件大小
//構(gòu)造html來更新UI
//var html = '<li id="file-' + files[i].id +'"><p class="file-name">' + file_name + '(' + plupload.formatSize(file_size) + ')' + '</p><p class="progress"></p></li>';
var html = '<li id="file-' + files[i].id +'"><span class="close"></span></li>';
$(html).appendTo('#file-list');
!function(i){
previewImage(files[i],function(imgsrc){
$('#file-'+files[i].id).append('<a><img src="'+ imgsrc +'" /><span class="progress">12</span></a>');
})
}(i);
$("#uploadfiles").trigger('click');
}
/*plupload.each(files, function(file) {
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
});*/
},
UploadProgress: function(up, file) {//上傳過程中調(diào)用的方法
//document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
$('#file-'+file.id +" .progress").html(file.percent + "%");
},
FileUploaded : function (up,file,res) {//文件上傳完成后
console.log(res.response);
var data = JSON.parse(res.response).data;
$('#file-'+file.id).children('.close').attr('img_id',data.img_id);
var img = $("#images_upload");
var str = img.val();
if(str == ''){
str = data.img_id;
}else{
str += ','+data.img_id;
}
img.val(str);
},
Error: function(up, err) {
//document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
}
}
});
//plupload中為我們提供了mOxie對象
//有關(guān)mOxie的介紹和說明請看：https://github.com/moxiecode/moxie/wiki/API
//file為plupload事件監(jiān)聽函數(shù)參數(shù)中的file對象,callback為預(yù)覽圖片準(zhǔn)備完成的回調(diào)函數(shù)
function previewImage(file,callback){
if(!file || !/image\//.test(file.type)) return; //確保文件是圖片
if(file.type=='image/gif'){ //gif使用FileReader進(jìn)行預(yù)覽,因?yàn)閙Oxie.Image只支持jpg和png
var gif = new moxie.file.FileReader();
gif.onload = function(){
callback(gif.result);
gif.destroy();
gif = null;
};
gif.readAsDataURL(file.getSource());
}else{
var image = new moxie.image.Image();
image.onload = function() {
image.downsize( 150, 150 );//先壓縮一下要預(yù)覽的圖片,寬300，高300
var imgsrc = image.type=='image/jpeg' ? image.getAsDataURL('image/jpeg',80) : image.getAsDataURL(); //得到圖片src,實(shí)質(zhì)為一個(gè)base64編碼的數(shù)據(jù)
callback && callback(imgsrc); //callback傳入的參數(shù)為預(yù)覽圖片的url
image.destroy();
image = null;
};
image.load( file.getSource() );
}
}
uploader.init();
//移除圖片
$("#file-list").on('click',".close",function(){
var img_id = $(this).attr("img_id");
var img = $("#images_upload");
var items=img.val().split(",");
var index = items.indexOf(img_id);
items.splice(index,1);//刪除元素
img.val(items.join(','));
$(this).parent().remove();
});
</script>
</body>
</html>
如果想研究插件源碼的朋友，可以看這個(gè)文件，其中大部分都已經(jīng)注釋了。
最終效果就是這樣了。
如果對tp5不太熟悉的朋友，建議直接配置虛擬域名，將項(xiàng)目目錄綁定到/tp5/public/目錄。
案例源碼：https://github.com/BlueSimle/thinkphp5-plupload (如果對你有幫助，請給個(gè)star哦。如果有什么疑問，請留言)
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- TP5框架實(shí)現(xiàn)上傳多張圖片的方法分析
- tp5框架基于ajax實(shí)現(xiàn)異步刪除圖片的方法示例
- tp5實(shí)現(xiàn)微信小程序多圖片上傳到服務(wù)器功能
- 基于ThinkPHP5.0實(shí)現(xiàn)圖片上傳插件
- ThinkPHP5+Layui實(shí)現(xiàn)圖片上傳加預(yù)覽功能
- ThinkPHP5.0 圖片上傳生成縮略圖實(shí)例代碼說明
- thinkPHP5框架整合plupload實(shí)現(xiàn)圖片批量上傳功能的方法
- thinkphp5上傳圖片及生成縮略圖公共方法(分享)
- thinkPHP5.0框架驗(yàn)證碼調(diào)用及點(diǎn)擊圖片刷新簡單實(shí)現(xiàn)方法
- Thinkphp5框架實(shí)現(xiàn)圖片、音頻和視頻文件的上傳功能詳解
- ThinkPHP5+UEditor圖片上傳到阿里云對象存儲OSS功能示例
- TP5框架實(shí)現(xiàn)一次選擇多張圖片并預(yù)覽的方法示例
相關(guān)文章
這篇文章主要介紹了Laravel框架自定義公共函數(shù)的引入操作,結(jié)合實(shí)例形式分析了Laravel5.5框架自定義公共函數(shù)的創(chuàng)建、配置、使用等相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
學(xué)習(xí)PHP，一定會(huì)遇到操作MYSQL數(shù)據(jù)庫，而且會(huì)對數(shù)據(jù)庫里的數(shù)據(jù)做分頁顯示出來的問題，下面寫一個(gè)小例子學(xué)習(xí)一下PHP分頁的方法。2013-10-10
destoon實(shí)現(xiàn)不同會(huì)員組公司名稱顯示不同的顏色的方法
這篇文章主要介紹了destoon實(shí)現(xiàn)不同會(huì)員組公司名稱顯示不同的顏色的方法,是非常實(shí)用的方法,代碼簡潔思路簡單,需要的朋友可以參考下2014-08-08
這篇文章給大家介紹了php類與構(gòu)造函數(shù)解析，包括類的創(chuàng)建，字段與方法，構(gòu)造函數(shù)等方面的內(nèi)容，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-02-02
PHP實(shí)現(xiàn)微信商戶支付企業(yè)付款到零錢功能
這篇文章主要為大家詳細(xì)介紹了PHP實(shí)現(xiàn)微信商戶支付企業(yè)付款到零錢功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要介紹了laravel安裝和配置教程,需要的朋友可以參考下2014-10-10
tp5使用layui實(shí)現(xiàn)多個(gè)圖片上傳(帶附件選擇)的方法實(shí)例
在以前項(xiàng)目中遇到有上傳圖片都是用 web Uploader插件上傳,因?yàn)槲椰F(xiàn)在項(xiàng)目都在使用 layui 所以今天趁著有時(shí)間寫一個(gè)tp5結(jié)合layui上傳圖片的示例，感興趣的可以了解一下2021-10-10
詳解PHP函數(shù) strip_tags 處理字符串缺陷bug
這篇文章主要介紹了詳解PHP函數(shù) strip_tags 處理字符串缺陷bug的相關(guān)資料,需要的朋友可以參考下2017-06-06
PHP設(shè)計(jì)模式之觀察者模式入門與應(yīng)用案例詳解
這篇文章主要介紹了PHP設(shè)計(jì)模式之觀察者模式入門與應(yīng)用,結(jié)合具體案例形式詳細(xì)分析了PHP觀察者模式的相關(guān)概念、原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-12-12
php實(shí)現(xiàn)HTML實(shí)體編號與非ASCII字符串相互轉(zhuǎn)換類實(shí)例
本篇文章主要介紹了"php實(shí)現(xiàn)HTML實(shí)體編號與非ASCII字符串相互轉(zhuǎn)換類實(shí)例"，主要涉及到HTML實(shí)體編號與非ASCII字符串相互轉(zhuǎn)換類方面的內(nèi)容，感興趣的同學(xué)可以參考一下。2016-11-11