您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān)如何在Laravel中使用Layer實(shí)現(xiàn)一個(gè)圖片上傳功能,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
一般在表單提交時(shí),都會(huì)存放一個(gè)隱藏的輸入框
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
或者在需要提交的表單中補(bǔ)充一行代碼:
<form method="POST" action="/profile"> {{ csrf_field() }} ...</form>
但是,在比較單一的元素進(jìn)行 ajax
提交時(shí),建議可使用如下的方法
①. 頁(yè)面中添加隱藏域
<input type="hidden" name="_token" class="tag_token" value="<?php echo csrf_token(); ?>">
②. ajax 請(qǐng)求前,先獲取 csrf_token()
值
var tag_token = $(".tag_token").val();
③. ajax 請(qǐng)求時(shí),將該值作為數(shù)據(jù)的一部分傳輸過去,例如:
data:{'_token':tag_token}
⒈ 源文件目錄
⒉ 前端準(zhǔn)備
頁(yè)面引入layui 的 css 和 js 文件
<script type="text/javascript" src="layui/layui.js"></script><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><link rel="stylesheet" type="text/css" href="layui/css/layui.css" rel="external nofollow" />
注: 本人下載的 layui 框架源碼包為 layui-v2.2.45
核心代碼:
<div class="layui-form-item"> <div class="layui-upload"> <button type="button" name="img_upload" class="layui-btn btn_upload_img"> <i class="layui-icon"></i>上傳圖片 </button> <img class="layui-upload-img img-upload-view" src="upload/dog.jpg"> <p id="demoText"></p> </div> </div>
js 代碼:
<script type="text/javascript"> layui.use('upload', function(){ var upload = layui.upload; var tag_token = $(".tag_token").val(); //普通圖片上傳 var uploadInst = upload.render({ elem: '.btn_upload_img' ,type : 'images' ,exts: 'jpg|png|gif' //設(shè)置一些后綴,用于演示前端驗(yàn)證和后端的驗(yàn)證 //,auto:false //選擇圖片后是否直接上傳 //,accept:'images' //上傳文件類型 ,url: 'upload.php' ,data:{'_token':tag_token} ,before: function(obj){ //預(yù)讀本地文件示例,不支持ie8 obj.preview(function(index, file, result){ $('.img-upload-view').attr('src', result); //圖片鏈接(base64) }); } ,done: function(res){ //如果上傳失敗 if(res.status == 1){ return layer.msg('上傳成功'); }else{//上傳成功 layer.msg(res.message); } } ,error: function(){ //演示失敗狀態(tài),并實(shí)現(xiàn)重傳 return layer.msg('上傳失敗,請(qǐng)重新上傳'); } }); }); </script>
⒊ 后端處理
因?yàn)榍岸?Layer 默認(rèn)的是 POST
請(qǐng)求,則后臺(tái) uplaod.php
核心代碼如下:
if ($_POST) { //上傳圖片具體操作 $file_name = $_FILES['file']['name']; //$file_type = $_FILES["file"]["type"]; $file_tmp = $_FILES["file"]["tmp_name"]; $file_error = $_FILES["file"]["error"]; $file_size = $_FILES["file"]["size"]; if ($file_error > 0) { // 出錯(cuò) $message = $file_error; } elseif($file_size > 1048576) { // 文件太大了 $message = "上傳文件不能大于1MB"; }else{ $date = date('Ymd'); $file_name_arr = explode('.', $file_name); $new_file_name = date('YmdHis') . '.' . $file_name_arr[1]; $path = "upload/".$date."/"; $file_path = $path . $new_file_name; if (file_exists($file_path)) { $message = "此文件已經(jīng)存在啦"; } else { //TODO 判斷當(dāng)前的目錄是否存在,若不存在就新建一個(gè)! if (!is_dir($path)){mkdir($path,0777);} $upload_result = move_uploaded_file($file_tmp, $file_path); //此函數(shù)只支持 HTTP POST 上傳的文件 if ($upload_result) { $status = 1; $message = $file_path; } else { $message = "文件上傳失敗,請(qǐng)稍后再嘗試"; } } } } else { $message = "參數(shù)錯(cuò)誤"; } return showMsg($status, $message);
【注意】: 使用下載的源碼文件時(shí),可將該處的核心代碼進(jìn)行替換
補(bǔ)充公共函數(shù) showMsg()
:
function showMsg($status,$message = '',$data = array()){ $result = array( 'status' => $status, 'message' =>$message, 'data' =>$data ); exit(json_encode($result)); }
? 補(bǔ)充
⒈ 注意事項(xiàng) 提供的代碼,可用于 PHP
的原生開發(fā)或其他流行框架,其實(shí)只要后臺(tái)能接收到 $_FILES
數(shù)據(jù)就好辦了 我就是卡在了 Laravel
框架的 CSRF
認(rèn)證上,耗費(fèi)了好多時(shí)間,所以:
<!--如果使用的是Laravel框架,打開下面這句話!--> <!--<input type="hidden" name="_token" class="tag_token" value="<?php /*echo csrf_token(); */?>">-->
后端代碼的圖片上傳功能屬于原生程序,可自行優(yōu)化,建議使用流行框架所推薦的集成方法。 ⒉ move_uploaded_file()
補(bǔ)充
對(duì)于上述的代碼,需要注意一點(diǎn) : move_uploaded_file()
方法的使用
如果圖片所上傳的目錄不存在,很可能會(huì)報(bào)錯(cuò),所以需要判斷當(dāng)前情況,若不存在,要建立新目錄
//TODO 判斷當(dāng)前的目錄是否存在,若不存在就新建一個(gè)! if (!is_dir($path)){mkdir($path,0777);}
⒊ Laravel 中的處理 作為 PHP 開發(fā)的流行框架,必然做了對(duì)文件上傳功能的集成,文件的上傳,可參考學(xué)習(xí)文檔,以本人的處理為例:
⑴. 相對(duì)于使用默認(rèn)的上傳方法,會(huì)將文件存放到 "storage"
目錄中,而進(jìn)一步對(duì)該目錄的訪問還需要添加軟鏈接,感覺有點(diǎn)麻煩,所以我指定磁盤到 "public"
目錄即可
⑵. 可參考我之前的一篇文章—— Laravel 文件上傳功能實(shí)現(xiàn) ,打開配置文件 config/filesystems.php
,向磁盤配置數(shù)組中添加一個(gè) url
'upload' => [ 'driver' => 'local', 'root' => public_path('upload/image/'.date('Ymd')), ],
⑶. 相對(duì)應(yīng)的后臺(tái)核心處理代碼則為:
public function img_file(Request $request) { $status = 0; $data = []; if ($request->method()== 'POST') { $date = date('Ymd'); $path = $request->file('file')->store('', 'upload'); if ($path){ $fileUrl = '/upload/image/'.$date.'/'.$path; $status = 1; $data['url'] = $fileUrl; $message = '上傳成功'; }else{ $message = "上傳失敗"; } } else { $message = "參數(shù)錯(cuò)誤"; } return showMsg($status, $message,$data); }
看完上述內(nèi)容,你們對(duì)如何在Laravel中使用Layer實(shí)現(xiàn)一個(gè)圖片上傳功能有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。