laravel5.1框架下实现图片上传
来源:互联网 发布:软件板块股票行情 编辑:程序博客网 时间:2024/05/17 00:50
本文通过两种方式讲解一下图片上传的工作:
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接口。无法看到图片预览"); }});这个函数处理图片,将图片放置图床上var image_holder = $("#lessonPreview") 然后返回上上张图的第一行进行显示。
0 0
- laravel5.1框架下实现图片上传
- laravel5 图片上传
- Laravel5.2中使用xheditor编辑器实现上传图片功能
- laravel5.1框架下的用户权限管理
- laravel5.1框架下的权限控制
- laravel5.1框架下的批量赋值
- Laravel5.2上传图片至七牛云
- Struts2框架下实现向服务器上传图片
- laravel5.1框架下的控制器和页面跳转
- Laravel5.1框架下有关路由的一种解决办法
- laravel5中使用七牛云存储、上传图片
- laravel5.1 框架 自定义分页
- ssm框架下fileupload图片上传实践
- Struts2框架下使用Kindeditor上传图片
- Java框架Struts2实现图片上传
- laravel5.4文件存储实战利用ajax上传图片
- Laravel5.1之文件上传并展示
- ssm框架下实现文件上传
- HTML总结
- Codeforces Round #353 (Div. 2)E
- Linux下安装VMware Tools 的方法
- 基于注解的组件扫描
- hdu2767&&hdu3836 Proving Equivalences(Tarjan+缩点)
- laravel5.1框架下实现图片上传
- Linux日常维护命令
- ViewPager + Fragment 获取Tag
- SSM小技巧(一)、Controller中互相调用session中存储的内容
- OC 对象作为方法的参数连续传递
- ZOJ 3228Searching the String
- MySQL入门--修改mysql提示符的两种方法
- 编程之美3:最大公约数问题
- 58.二叉搜索树的第k个结点