laravel框架上传图片实现实时预览功能
更新时间:2019年10月14日 09:33:22 作者:QDX_1209_BJ
今天小编就为大家分享一篇laravel框架上传图片实现实时预览功能,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
在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框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Zend Framework入门教程之Zend_View组件用法示例
这篇文章主要介绍了Zend Framework中Zend_View组件用法,结合实例形式简单分析了Zend_View组件视图操作的相关技巧与注意事项,需要的朋友可以参考下2016-12-12TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
这篇文章主要介绍了TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法,结合实例形式分析了thinkPHP5显示错误信息及行号的相关配置文件与设置修改方法,需要的朋友可以参考下2019-06-06Zend Framework教程之Zend_Registry对象用法分析
这篇文章主要介绍了Zend Framework教程之Zend_Registry对象用法,结合实例形式分析了对象注册表Zend_Registry的具体功能与相关使用技巧,需要的朋友可以参考下2016-03-03curl不使用文件存取cookie php使用curl获取cookie示例
这篇文章主要介绍了curl不使用文件存取cookie的示例,不使用COOKIEJAR和COOKIEFILE存取COOKIE,大家参考使用吧2014-01-01
最新评论