laravel框架上傳圖片實(shí)現(xiàn)實(shí)時(shí)預(yù)覽功能
更新時(shí)間：2019年10月14日 09:33:22 作者：QDX_1209_BJ
今天小編就為大家分享一篇laravel框架上傳圖片實(shí)現(xiàn)實(shí)時(shí)預(yù)覽功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
在laravel框架中上傳圖片并實(shí)時(shí)預(yù)覽，其實(shí)并沒(méi)有那么難，下面給大家展示一下；
HTML代碼：
<img class="pic house-a" οnclick="houseImgOne(this)" name="house_img_one" id="house_img_one" src=""> <input type="file" name="house_img_one" id="house_img_one1" multiple="multiple" style="display:none;">
controller代碼：
public function upload($photo)
{
$file_ex = $photo->getClientOriginalExtension();
if (!in_array($file_ex, array('jpg', 'gif', 'png', 'jpeg'))) {
echo "<script>alert('文件格式錯(cuò)誤,僅支持 jpg ,gif,png,jpeg');location.href='/apply'</script>";
}
$newname = date('Ymdhis') . rand(1, 999) . "." . $file_ex;
$savepath = config('constants.img_uf') .'Uploads/Apply/';
$path = $photo->move($savepath, $newname);
$filepath = "UF/Uploads/Apply/" . $newname;
return $filepath;
}
這里是把上傳，封裝成了一個(gè)方法，添加的時(shí)候直接添加最后的路徑就可以了；
js代碼：
var _btnId = '';
function houseImgOne(_this){
_btnId = $(_this).attr('id');
$('#house_img_one1').click();
$("#house_img_one1").change(function () {
var objUrl = getObjectURL(this.files[0]); //獲取圖片的路徑，該路徑不是圖片在本地的路徑
if (objUrl) {
$("#" + _btnId).attr("src", objUrl); //將圖片路徑存入src中，顯示出圖片ai
}
});
}
/建立一個(gè)可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
}
效果圖片：
以上這篇laravel框架上傳圖片實(shí)現(xiàn)實(shí)時(shí)預(yù)覽功能就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Yii使用技巧,實(shí)例匯總了Yii框架使用過(guò)程中經(jīng)常使用的各種常見(jiàn)技巧,需要的朋友可以參考下2015-12-12
PHP封裝curl的調(diào)用接口及常用函數(shù)詳解
今天小編就為大家分享一篇PHP封裝curl的調(diào)用接口及常用函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了基于PHP制作驗(yàn)證碼,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了PHP下載大文件失敗并限制下載速度的實(shí)例代碼,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細(xì)介紹了PHP實(shí)現(xiàn)簡(jiǎn)單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Yii實(shí)現(xiàn)自動(dòng)加載類(lèi)地圖的方法
這篇文章主要介紹了Yii實(shí)現(xiàn)自動(dòng)加載類(lèi)地圖的方法,涉及Yii加載類(lèi)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了tp5.1 框架查詢表達(dá)式用法,結(jié)合實(shí)例形式詳細(xì)分析了tp5.1 框架常用查詢表達(dá)式功能、定義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
PHP?WindSearch實(shí)現(xiàn)站內(nèi)搜索功能
WindSearch是一個(gè)基于中文分詞,由純PHP開(kāi)發(fā)全文檢索引擎,可快速搭建PHP站點(diǎn)的站內(nèi)搜索,下面我們就來(lái)看看如何使用WindSearch實(shí)現(xiàn)站內(nèi)搜索功能吧2025-02-02
本文簡(jiǎn)單介紹如何防止外部惡意調(diào)用ajax接口，以達(dá)到節(jié)省流量，減輕服務(wù)器壓力的目的。2016-04-04
php+mongodb判斷坐標(biāo)是否在指定多邊形區(qū)域內(nèi)的實(shí)例
本篇文章主要介紹了php+mongodb判斷坐標(biāo)是否在指定多邊形區(qū)域內(nèi)的實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10