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

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