thinkphp上传图片并jquery预览

先上效果图：

那个file按钮样式先忽略

点击选择图片（浏览），随便选一张图片

js代码如下

//上传图片立即预览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.0document.getElementById("photo_info").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";//document.getElementById("img1").src = path;}}}

html代码，其实不重要啦

<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"> 选择图片 <spanclass="glyphicon glyphicon-picture" aria-hidden="true"></span><input type="file" name="info_photo" 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"><spanstyle="color: red;">* </span>&nbsp;详细描述</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></div>

css代码就不上了啊
顺便补充一下thinkphp上传图片代码，把整个发布消息都拷过了算了

public function loseThing(){$m=M('info');$m->create();$upload = new \Think\Upload();// 实例化上传类$upload->maxSize   =     3145728 ;// 设置附件上传大小$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg','bmp');// 设置附件上传类型$upload->rootPath = './Public/';$upload->savePath = '/Uploads/'; // 设置附件上传目录$upload->autoSub = false;// 上传文件$info   =   $upload->upload();if($info) {// 上传成功foreach($info as $file){$m->info_photo=$file['savename'];}}$m->create_time=date('Y-m-d H:i:s',time());    $m->uid=$_SESSION['id'];$m->username=$_SESSION['username'];/*  $m->user_img=$_SESSION['filename']; */$m->info_type="寻物启事";//信息类型为失物$lastId=$m->add();if($lastId){$this->success('发布成功');}else{$this->error('发布失败,请先登录');} }

本文地址：http://liuyanzhao.com/3502.html

转载请注明

thinkphp上传图片并jquery预览相关推荐

OSS上传图片无法在线预览的解决方案
OSS上传图片无法在线预览的解决方案参考文章: (1)OSS上传图片无法在线预览的解决方案 (2)https://www.cnblogs.com/tian874540961/p/12058544.h ...
EasyUI上传图片，前台预览，后台读取
背景 Spring MVC + EasyUI 前台上传图片,并预览下面是jsp的内容,form表单 java <form id="upload_form" enctype= ...
java 上传图片，图片预览，2种方法
java 上传图片,图片预览,2种方法 1. 方法一:将图片上传到特定磁盘 html页面,form表单内容: <div class="layui-form-item"> ...
在BAE搭建的Django中实现图片上传并用jquery预览图片
在BAE上搭建好了django,如何实现图片上传并预览呢? 想要实现图片上传并不难,但是想看到刚上传的图片,就得在服务器返回上传后图片的url.可是返回数据的话,网页就会重定向.因此想要在上传页面预览 ...
php ajax多图上传预览,Ajax上传图片及先预览功能的实现方法
最近有几个小项目用到了easyUI,一开始决定使用easyUI就注定了项目整体上前后端分离,基本上所有的请求都采用Ajax来完成.在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果, ...
HTML添加上传图片并进行预览
使用说明:新建文件,直接复制粘贴,保存文件为html 格式,在浏览器运行即可: 第一种: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tr ...
element upload预览_vue+element上传图片并显示预览图
html代码: :show-file-list="false" :on-success="handleAvatarSuccess" :on-change=&qu ...
anguarjs 上传图片预览_JS控制上传图片个数，预览上传图片
一共是2个函数 //这个函数的作用预览上传的图片 function fileView(filesObj){ //显示上传图片预览 var view=document.querySelector(&qu ...
js上传图片并实现预览
js上传图片预览前端页面  <input type="file" accept="image/*" onc ...
uni-app上传图片(选择，预览，删除图片)
用uni-app做项目时,上传图片的功能需求应该是在正常不过的了.最近有几个项目都有遇到,所以想总结一下.所用到的api都很简单. 功能需求功能需求如列表所示,视图展现如图所示,代码如下.点击相框按 ...

thinkphp上传图片并jquery预览

thinkphp上传图片并jquery预览相关推荐

最新文章

热门文章