如何实现Laravel框架中图片上传的实时预览功能？

本文共计413个文字，预计阅读时间需要2分钟。

在Laravel框架中上传图片并实时预览其实并不复杂，下面是简化后的步骤和代码示例：

步骤：

1.创建一个表单，包含一个文件输入元素用于上传图片。

2.使用JavaScript监听文件输入的变化，读取图片文件并显示预览。

代码示例：

在laravel框架中上传图片并实时预览，其实并没有那么难，下面给大家展示一下；

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框架上传图片实现实时预览功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。