laravel框架上传图片实现实时预览功能

Laravel  /  管理员 发布于 8年前   177

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

HTML代码：

controller代码：

 public function upload($photo)  {    $file_ex = $photo->getClientOriginalExtension();    if (!in_array($file_ex, array('jpg', 'gif', 'png', 'jpeg'))) {      echo "";    }    $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的urlfunction 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框架上传图片实现实时预览功能就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

您可能感兴趣的文章:

• Laravel+Layer实现图片上传功能(整理篇)
• PHP Laravel 上传图片、文件等类封装
• laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
• laravel 实现上传图片到本地和前台访问示例
• laravel实现上传图片的两种方式小结
• Laravel框架实现的上传图片到七牛功能详解
• laravel 多图上传及图片的存储例子
• laravel实现上传图片并在页面显示的例子
• laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
• laravel实现上传图片,并且制作缩略图,按照日期存放的代码
• laravel5.5框架的上传图片功能实例分析【仅传到服务器端】