laravel5.1框架下实现图片上传

最新推荐文章于 2022-12-22 11:28:09 发布

原创最新推荐文章于 2022-12-22 11:28:09 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Laravel #web开发 #图片 #控件 #javascript

本文介绍了在Laravel 5.1框架下实现图片上传的两种方法，包括MAC下Apache服务器配置、控制器编写、前端界面展示以及JavaScript交互。在用户新建或编辑时，分别展示了不同的处理步骤，强调了前端和后端处理的区分。

本文通过两种方式讲解一下图片上传的工作:

1.新建用户，上传头像的时候，我们先要配置一下网站所用的服务器，这里介绍MAC下apache服务器的配置，编辑/etc/apache2/extra目录下的httpd-vhosts.conf

控制器：

前端显示界面：

这段代码会在前端页面绘制出这样一个控件：

为了实现点击按钮弹出选择图片的本地文件选择框，我们还需要编写js代码：

2.第二种方式存在于获取用户信息并编辑的情况

控制器：

需要根据当前要编辑的对象进行数据库的查表操作，

前段显示界面和第一种方法的一样，只是这里的js代码不一样：

所以根据这两点可见很多处理都是可以分为前端处理还是后端处理的。

PS：

补充几点代码解读：

1.<div id="lessonPreview"></div>
2.<div class="form-group">
3.   <div class="btn btn-default btn-file">
4.       <i class="fa fa-paperclip"></i>上传封面图片
5.       <input name="photo1" required id="lesson" type="file"/>
6.   </div>
7.   <p class="help-block">最大不超过2MB</p>
  </div>

上面的第五行代码是获取上传图片的信息，required id = "lesson"将和js文件的这一行代码对应：

$("#lesson").on('change', function () {

    if (typeof (FileReader) != "undefined") {

        var image_holder = $("#lessonPreview");
        image_holder.empty();

        var reader = new FileReader();
        reader.onload = function (e) {
            $("<img />", {
                "src": e.target.result,
                "class": "cover_small"
            }).appendTo(image_holder);

        };
        image_holder.show();
        reader.readAsDataURL($(this)[0].files[0]);
    } else {
        alert("你的浏览器不支持FileReader接口。无法看到图片预览");
    }
});