在laravel框架中上傳圖片并實時預(yù)覽，其實并沒有那么難，下面給大家展示一下；
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框架上傳圖片實現(xiàn)實時預(yù)覽功能就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
標(biāo)簽：香港 寶雞 通化 阿克蘇 金華 郴州 自貢 佳木斯
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《laravel框架上傳圖片實現(xiàn)實時預(yù)覽功能》，本文關(guān)鍵詞 laravel,框架,上傳,圖片,實現(xiàn),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
