示例: tp3.1使用webuploader0.1.5插件多圖上傳,后臺php原生接收
[toc]
## :-: **效果**


- 對應的效果是:
1、上傳圖片:選擇圖片-》開始上傳圖片(上傳成功后)-》會顯示圖片上傳成功 && 可以通過下拉框和文本框,一起提交給后端
2、刪除圖片:點擊刪除,刪除整個節點
3、修改圖片附屬信息:就是修改下拉框和文本框中的值
- 亮點在于:
1、前端代碼的38行,由于我這是存到3個字段,用戶不選,會存個默認值,所以會有對應的關系。這樣我取值的時候,就可以用圖片的$k,因為圖片的$k和$imgType的$type_k下標一樣
2、下拉框和文本框是通過 后端上傳成功后,動態添加的。可不刪圖片修改值
## :-: **前端插件代碼**
前端代碼,保存在.php文件中
``` php
<body>
<tr>
<th>
教學資質
<div>上傳圖片</div>
</th>
<td>
<!-- 如果 是空字符串就隱藏,否則就顯示xxx_type對應前臺是證書名稱,xxx_names對應前臺是證書編號-->
<span>已上傳的圖片:</span>
<div style="overflow: hidden" imgUrl="<?php echo $data['teacher_aptitude_imgs'];?>" id="is_show_img" >
<!-- 查出來的字符串轉數組,然后遍歷顯示-->
<!--圖片類型(對應前臺證書名稱)-->
<?php $imgType = explode(',',$data['teacher_aptitude_imgs_type']);
foreach ($imgType as $type_k => $type_v):
?>
<?php endforeach;?>
<!--圖片名稱(對應前臺證書編號)-->
<?php $imgName = explode(',',$data['teacher_aptitude_imgs_names']);
foreach ($imgName as $name_k => $name_v):
?>
<?php endforeach;?>
<!--圖片地址-->
<?php $imgArr = explode(',',$data['teacher_aptitude_imgs']);
foreach ($imgArr as $k => $v):
?>
<div style="border:1px solid #CCCCCC;overflow: hidden;">
<div style="float: left;width: 33.3%;" class="del_img">
<div class="del_node">
<img src="http://<?php echo $v;?>" style="width:100px;height:100px;" >
<!--點擊刪除圖片后,要在當前$v中刪掉這個圖片,并且將這張圖片在數據庫中刪除(更新)-->
<a href="javascript:;" class="del_btn" style="color:red;" >刪除圖片</a>
*證件名稱
<select name="imgs_types[]">
<option value="請選擇" <?php if($imgType[$k]=='請選擇'){ echo selected;}?> >請選擇</option>
<option value="聯培證" <?php if($imgType[$k]=='聯培證'){ echo selected;}?> >聯培證</option> <!--循環出所有類型,并標記出默認-->
<option value="教師資格證" <?php if($imgType[$k]=='教師資格證'){ echo selected;}?> >教師資格證</option>
</select>
*證書編號
<input class="del_imgs_names" type="text" name="imgs_names[]" imgs_names_key="<?php echo $k;?>" value="<?php echo $imgName[$k]?>" /> <!--刪除del_node節點的時候,要刪調這個節點-->
<input type="hidden" name="img_url[]" value="<?php echo $v;?>" />
</div>
</div>
</div>
<?php endforeach?>
</div>
<br />
<div id="uploader-demo">
<!--用來存放item-->
<div style="width:800px;height:200px;margin-left:10px;" id="fileList" class="uploader-list"></div>
<div id="filePicker">選擇圖片</div>
<div style="width:78px;margin-top:10px;height: 38px;line-height: 38px;text-align: center;background: #0E774A;border-radius: 2px;"><a href="javascript:;" style="color:#fff;text-decoration: none;" id="start">開始上傳圖片</a></div>
<div>支持jpg、png、jpeg格式,建議圖片大小不要超過10M</div>
</div>
</td>
</tr>
<script>
var $list=$("#fileList"); //這幾個初始化全局的百度文檔上沒說明,好蛋疼
var thumbnailWidth = 100; //縮略圖高度和寬度 (單位是像素),當寬高度是0~1的時候,是按照百分比計算,具體可以看api文檔
var thumbnailHeight = 100;
//初始化Web Uploader
var uploader = WebUploader.create({
// 選完文件后,是否自動上傳。
auto: false,
// swf文件路徑
swf: '<?php echo CSS_PATH;?>webuploader-0.1.5/Uploader.swf',
server: '/index.php?m=teacher&c=teacher&a=uploadImg', // 文件接收服務端。
//duplicate :true,// 重復上傳圖片,true為可重復false為不可重復
// 選擇文件的按鈕,可選。內部根據當前運行是創建,可能是input元素,也可能是flash.
pick: {id:'#filePicker'}, //第2個參數是修改按鈕上面的文字;如果是單圖上傳,將第3個參數 置為true
// 只允許選擇圖片文件。
accept: {
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/*'
},
//fileSingleSizeLimit :'10485760' //單張不能超10M。超過10M沒有任何提示,只是圖片不會添加到隊列,也就是選不上圖片
//fileVal:'xg', //默認是file 通過打印$FILES就能看到
//method:'post', //請求方式
//fileSizeLimit:'', //20張之和 如果 超過多少M,就不讓上傳。單位是字節
//fileNumLimit:20 //每次上傳,不能超過20張
});
//【圖片預覽】當有文件添加進來的時候,監聽fileQueued事件,通過uploader.makeThumb來創建圖片預覽圖。
uploader.on( 'fileQueued', function( file ) {
// console.log(file); //上一行,匿名函數中的file
var $li = $(
'<div style="display:inline-block" id="' + file.id + '" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'<span id="del" style="color:red;">刪除圖片</span>' +
'<br /><span id="tis">等待上傳中....</span><progress value="0" max="100"></progress>' +
'</div>'
),
$img = $li.find('img');
// $list為容器jQuery實例
$list.append( $li );
// 創建縮略圖
// 如果為非圖片文件,可以不用調用此方法。
// thumbnailWidth x thumbnailHeight 為 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能預覽</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
//【刪除圖片】
//這種是動態創建的,直接用click或live不行,獲取不到。不要綁定,可以在標簽中加自定義的函數onclick="aa()"
$list.on('click','#del',function(){ //該事件是由$list中id=del的觸發的
var id = $(this).parent().attr('id'); //獲取$list上的id屬性
$(this).parent().remove(); //刪除html中的圖片
var quId = uploader.getFile(id); //獲取圖片在隊列中的id
uploader.removeFile(quId,true); //刪除隊列中的圖片
});
//【手動上傳】往后臺發送 隊列 中的內容
$("#start").on('click',function(){
uploader.upload(); //對象 調 方法
});
//【進度條】文件上傳過程中創建進度條實時顯示。
uploader.on( 'uploadProgress', function( file, percentage ) { //第2個參數是當前的上傳進度,最大是1,所以要*100
$( '#'+file.id ).find('progress').val(percentage*100);
$( '#'+file.id ).find('progress').css("background-color","yellow"); //藍色+黃色配成一個綠色進度條
});
//【成功】文件上傳成功,給item添加成功class, 用樣式標記上傳成功。
uploader.on( 'uploadSuccess', function(file,data) { //第2個參數是php返回的處理結果
console.log(data);
$("#" + file.id).find('#del').remove(); //刪掉,刪除圖片
//這是前端的上傳成功,后端的成功和失敗都在這里處理
if(data.code == 1){ //上傳成功
$( '#'+file.id ).find('#tis').text(data.msg).css('color','green'); //進度條的提示語換成上傳成功,并將字的改成綠色的
$( '#'+file.id ).append('<input name="img_url[]" type="hidden" value="' + data.url + '">');
$( '#'+file.id ).append('*證書名稱 <select name="imgs_types[]">\n' +
'<option value="請選擇" selected = "selected">請選擇</option>\n' +
'<option value="聯培證">聯培證</option>\n' +
'<option value="教師資格證">教師資格證</option>\n' +
'</select>');
$( '#'+file.id ).append('*證書編號 <input type="text" name="imgs_names[]" value="請輸入圖片名稱">');
}else{
$( '#'+file.id ).find('#tis').text(data.msg).css('color','red'); //顯示上傳失敗
}
});
//【失敗】文件上傳失敗,顯示上傳出錯。
uploader.on( 'uploadError', function( file ) {
console.log('前端上傳失敗');
console.log(file);
// var $li = $( '#'+file.id ),
// $error = $li.find('div.error');
//
// // 避免重復創建
// if ( !$error.length ) {
// $error = $('<div class="error"></div>').appendTo( $li );
// }
//
// $error.text('前端上傳失敗');
});
// 完成上傳完了,成功或者失敗,先刪除進度條。
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('progress').remove(); //刪除進度條
});
</script>
</body>
```
## :-: **后端php原生上傳代碼**
``` php
/**
* 原生上傳圖片
*/
public function uploadImg(){
$file = $_FILES['file']; //接收上傳的圖片
if($file['size'] >= 10485760){ //大于10M
$this->ajaxRtn(23,'圖片大于10M');
exit;
}else{
if($file['error'] == 0){
//按照年月日創建目錄
$savePath='e:/'.date("Y").'/'.date("m").'/'.date("d");
_mkdir($savePath);
//效驗文件格式
$fileType = explode('/',$file['type']);
if(array_key_exists($fileType[1],['jpg','png'])){
$this->ajaxRtn(403,'圖片類型不對');
exit;
}
$filePath = DIR_MANAGE_PATH.'/'.rand(1111,9999).'.png'; //上傳到哪個位置
$uploadRes = move_uploaded_file($file['tmp_name'],$filePath); //【關鍵在這,上傳文件】
if($uploadRes){ //文件上傳成功
$obj = new \Think\Model('img'); //入庫
$data['img'] = $filePath;
$res = $obj->add($data);
//echo $obj->getLastSql();
$this->ajaxRtn(1,$filePath); //上傳成功返回圖片地址,以供顯示
if(!$res){
$this->ajaxRtn(2,'上傳失敗');
}
}
}else{
$this->ajaxRtn(22,'上傳錯誤');
}
}
}
```
``` php
/**
* 返回狀態碼
* @param $code 狀態碼
* @param $message 信息
*/
public function ajaxRtn($code,$message){
$msg = ['code'=>$code,'msg'=>$message];
echo json_encode($msg);
}
```
``` php
function _mkdir($file_path){
//判斷給定文件名是否是一個目錄
if(!is_dir($file_path)){
mkdir($file_path,0755,true);
}
}
```
- 雜談
- 開發 & 維護的工作流程
- 新手如何看php手冊 和 框架手冊
- 開發 & 維護的不同點
- 從0到1,搭建新項目的工作流程
- 從1到N,維護的工作流程
- 優化流程
- 生成錯誤日志和慢日志的方法
- 查錯思路
- 怎么快速接手一個項目
- 前端常用知識點
- javascript
- 自己封裝的函數
- 處理數字
- 功能代碼
- 動態添加圖片
- 判斷是手機端還是pc端
- javascript:;是什么意思?怎么用呢
- html & h5
- a標簽中target設置為blank和_blank有什么區別?
- 亂碼
- 提交方式:button標簽 和 input
- 塊元素
- 內聯元素
- h5特有屬性
- h5的localStorage【增、刪、改、查】
- jquery
- 常用方法
- 功能代碼
- 動態刪除圖片
- 一個按鈕,切換2種狀態
- 換膚
- 深入理解(function(){... })();
- json & xml
- json
- 語法速記
- json對象取值
- 字符串、對象、數組的區別
- xml
- [CDATA[%s]]的作用是什么
- 轉義字符
- CDATA 想被xml解析的文本數據
- CDATA 不想被xml解析的文本數據
- 微信小程序
- 其他
- websocket
- 跨域
- css
- 行內 & 內連 & 外連 寫法
- 優先級
- 更加精準的匹配
- 使用百分比如何生效
- php在html、js、jq中的的原生寫法
- *php在html中的語法
- php在js中的語法
- php在jq中的語法
- 正則表達式
- php常用基礎知識(思想為主)
- php為什么是“邊編譯邊運行”
- 冒號、endif、endwhile、endfor使用
- 遞歸思想(速記法)
- cookie和session的理解
- php常用內置(系統)函數
- 常量
- 字符串
- 數組
- 日期時間
- 文件 & 目錄
- 數學
- 程序執行
- 判斷
- 選項和信息(修改配置文件的)
- 錯誤處理 & 日志記錄
- 編碼格式
- session
- IP相關
- 類 & 對象
- 性能
- 其他函數
- 魔術方法
- $_SERVER
- 變量處理
- php自己封裝的一些函數
- 導入、導出、生成文件
- 數組
- 數字
- 字符串
- 其他
- 獲取linux硬件信息
- 常見插件/類庫使用
- 前端-框架/插件
- bootstrap 學習筆記
- layer 學習筆記
- layDate 學習筆記
- 百度ueditor1.4.4.3富文本編輯器
- quill富文本編輯器
- 百度ECharts圖形報表
- webuploader上傳圖片
- 后端類庫
- workerman 聊天室
- QRCODE 二維碼
- redis
- seaslog 日志
- phpspider 爬蟲
- Mailer 發送郵件
- simple_html_dom
- phpstorm使用
- 快捷鍵
- 連接mysql數據庫
- 斷點 + debug調試
- 運行內存不夠
- wamp環境
- yii、laravel、tp、開發自己的php框架
- 看框架源碼的思路
- tp5框架的使用
- 1、助手函數原理解析
- 開發自己的php框架
- 常用的開發思路 和 小功能實現代碼
- 爬蟲思路
- 功能點思路
- tp5判斷是不是異地登錄(簡單版)
- 微信開發,反向代理
- 微信開發,關閉當前頁面
- 消息隊列的實現
- 頁面靜態化
- session串號
- 站內信設計思路
- web在線管理器
- 語言相關(開發有關)
- 接收json(text/xml)格式數據
- 原生文件上傳(狀態碼)
- openssl擴展
- 打印對象 和 遍歷對象
- 使用OB緩存的幾個原則
- CLI模式執行php文件
- foreach時,添加元素 或 修改元素的值
- 功能點 代碼實現
- 生成url目錄樹(沒有pid)
- 多圖上傳(vue傳base64)
- 下載文件,耗時算法
- 生成商品二維碼
- 導出excel
- 搜索
- 阿里大魚發短信
- 使用阿里云oss
- location.href跳轉后,丟失用戶的session
- “\r ” “\r\n” “\t”的區別
- php的配置文件詳解
- 開啟錯誤日志
- 開啟慢日志
- 開啟短標簽
- 分析php-fpm.conf中的request_terminate_timeout參數