内容正文
这篇文章主要为大家详细介绍了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