gpt4 book ai didi

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

转载 作者:qq735679552 更新时间:2022-09-29 22:32:09 24 4
gpt4 key购买 nike

CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章laravel框架上传图片实现实时预览功能由作者收集整理,如果你对这篇文章有兴趣,记得点赞哟.

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

HTML代码:

?
1
2
< 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代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
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代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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框架上传图片实现实时预览功能

以上这篇laravel框架上传图片实现实时预览功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我.

原文链接:https://blog.csdn.net/q459691431/article/details/74737593 。

最后此篇关于laravel框架上传图片实现实时预览功能的文章就讲到这里了,如果你想了解更多关于laravel框架上传图片实现实时预览功能的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com