ThinkPHP5与JQuery实现图片上传和预览效果
内容正文
这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
先上效果图:
html和js代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表单提交 -->
<form action="{:url('Index/uploadImg')}" enctype="multipart/form-data" method="post">
<div class="form-group has-success has-feedback">
<label for="info_photo" class="col-sm-2 control-label">物品图片</label>
<div class="col-sm-10"> <span class="btn btn-success btn-file"> 选择图片 <span
class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<input type="file" name="image" value="" id="info_photo"
onchange='PreviewImage(this)' />
</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label for="info_desc" class="col-sm-2 control-label"><span
style="color: red;">* </span> 详细描述</label>
<div class="col-sm-10">
<textarea class="form-control" rows="5" id="info_desc"
name="info_desc" placeholder="如需补充,请填写..." title="可包含中文数字和常用字符"></textarea>
<div id="photo_info" class="photo_info"></div>
</div>
<button type="submit">提交</button>
</form>
</div>
</body>
<!-- js实现图片预览效果 -->
<script type="text/javascript">
//上传图片立即预览
function PreviewImage(imgFile) {
var filextension = imgFile.value.substring(imgFile.value
.lastIndexOf("."), imgFile.value.length);
filextension = filextension.toLowerCase();
if ((filextension != '.jpg') && (filextension != '.gif')
&& (filextension != '.jpeg') && (filextension != '.png')
&& (filextension != '.bmp')) {
alert("对不起,系统仅支持标准格式的照片,请您调整格式后重新上传,谢谢 !");
imgFile.focus();
} else {
var path;
if (document.all)//IE
{
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("photo_info").innerHTML = "";
document.getElementById("photo_info").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
+ path + "\")";//使用滤镜效果
} else//FF
{
path = window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
//path = imgFile.files[0].getAsDataURL();// FF 3.0
document.getElementById("photo_info").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
//document.getElementById("img1").src = path;
}
}
}
</script>
</html>
php代码如下:
<?php
namespace app\index\controller;
use think\Controller;
use think\View;
use think\Request; class Index extends Controller
{
public function index()
{
$view = new View();
return $view->fetch();
} public function uploadImg(Request $request)
{
if (request()->isPost()) {
//获取详细描述信息
$param = $request->post(); // 获取表单上传文件 例如上传了001.jpg
$file = request()->file('image');
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if ($info) {
$data = ROOT_PATH .DS . 'public/uploads' . DS . $info->getSaveName();
echo $data;//输出路径如:C:\phpStudy\WWW\tp_test\\public/uploads\20180727\eb7fa19f0035bf2bdd5e6a3690091d93.jpg
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}
//接下来进行入库操作 } else {
$view = new View();
return $view->fetch();
}
}
}
原文转载:https://mp.weixin.qq.com/s/wloVsvw4-Aqy2kqwbZgSCQ
ThinkPHP5与JQuery实现图片上传和预览效果的更多相关文章
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- JS兼容各个浏览器的本地图片上传即时预览效果\、
在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- JQuery插件:图片上传本地预览插件,改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- jQuery:[1]实现图片上传并预览
jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
随机推荐
- python 爬虫第三方库
这个列表包含与网页抓取和数据处理的Python库 网络 通用 urllib -网络库(stdlib). requests -网络库. grab – 网络库(基于pycurl). pycurl – 网络 ...
- mybatis Condition查询
Condition condition = new Condition(ACurrentTotal.class); condition.createCriteria().andCondition(&q ...
- Python Algorithms – chapter2 基础知识
一.渐进记法 三个重要的记号 Ο.Ω.Θ,Ο记法表示渐进上界,Ω记法表示渐进下界,Θ记法同时提供了函数的上下界 几种常见的渐进运行时间实例 三种重要情况 最好的情况,最坏的情况,平均情况 最坏的情况通 ...
- opengl库学习
http://www.cppblog.com/doing5552/archive/2009/01/08/71532.html http://blog.csdn.net/wolf96/article/d ...
- jQuery.Deferred exception: $.get is not a function TypeError: $.get is not a function
/********************************************************************** * jQuery.Deferred exception: ...
- JavaBasic_07
面向对象三大特征 1.封装 封装是一种信息隐藏技术 a.是指数据和基于数据的操作封装在一起,数据被保护在内部(类的内部(对象)) b.系统的其他部分只有通过在数据外面的被授权的操作才能进行交互(没有授 ...
- 使用kcptun安全代理访问服务
KCP 是一个快速可靠协议,能以比 TCP浪费10%-20%的带宽的代价,换取平均延迟降低 30%-40%,且最大延迟降低三倍的传输效果. KCP:https://github.com/skywind ...
- java学习之动手实验
一, 1,JAVA的基本运行单位是类 2,类的成员:成员变量,构造方法,普通方法和内部类 3,成员变量种类:字符类型:char 布尔类型:boolean 数值类型:byte, ...
- Python数据结构——栈的链表实现
自定义链表实现栈的数据结构,代码如下: class Stack: def __init__(self): self._first = None def push(self,item): self._f ...
- centos6下安装opencv3
环境 centos6.5 opencv3.3.0 python3.4.9 下载 opencv可从GitHub下载https://github.com/opencv/opencv/tree/3.4.3可 ...