laravel框架上传图片实时预览

最新推荐文章于 2022-03-27 16:38:23 发布

QDX_1209_BJ

最新推荐文章于 2022-03-27 16:38:23 发布

阅读量2.9k

点赞数 3

分类专栏： laravel 文章标签： PHP laravel 图片上传实时预览

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

版权

laravel 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在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;
}

效果图片：