laravel框架上傳圖片實(shí)現(xiàn)實(shí)時預(yù)覽功能
在laravel框架中上傳圖片并實(shí)時預(yù)覽,其實(shí)并沒有那么難,下面給大家展示一下;
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('文件格式錯誤,僅支持 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; }
這里是把上傳,封裝成了一個方法,添加的時候直接添加最后的路徑就可以了;
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 } }); } /建立一個可存取到該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í)時預(yù)覽功能就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
利用php的ob緩存機(jī)制實(shí)現(xiàn)頁面靜態(tài)化方法
下面小編就為大家?guī)硪黄胮hp的ob緩存機(jī)制實(shí)現(xiàn)頁面靜態(tài)化方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07PHP獲取網(wǎng)頁標(biāo)題的3種實(shí)現(xiàn)方法代碼實(shí)例
這篇文章主要介紹了PHP獲取網(wǎng)頁標(biāo)題的3種實(shí)現(xiàn)方法,分別使用CURL、file()函數(shù)、file_get_contents實(shí)現(xiàn),需要的朋友可以參考下2014-04-04詳解WordPress中提醒安裝插件以及隱藏插件的功能實(shí)現(xiàn)
這篇文章主要介紹了WordPress中提醒安裝插件以及隱藏插件的功能實(shí)現(xiàn),這兩種功能通常在多用戶模式下進(jìn)行管理時用得比較多,需要的朋友可以參考下2015-12-12創(chuàng)建配置文件 用PHP寫出自己的BLOG系統(tǒng) 2
今天做博客安裝程序,首先做的是配置文件的創(chuàng)建。2010-04-04