thinkphp jquery实现图片上传和预览效果


Posted in PHP onJuly 22, 2020

本文实例为大家分享了jquery实现图片上传和预览效果的具体代码,供大家参考,具体内容如下

先上效果图:

thinkphp jquery实现图片上传和预览效果

那个file按钮样式先忽略

点击选择图片(浏览),随便选一张图片

thinkphp jquery实现图片上传和预览效果

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.0
 document.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"> 选择图片 <span
   class="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"><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>
  </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('发布失败,请先登录');
 } 
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
我的群发邮件程序
Oct 09 PHP
php heredoc和phpwind的模板技术使用方法小结
Mar 28 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
Jan 27 PHP
php设计模式 Template (模板模式)
Jun 26 PHP
php中json_encode中文编码问题分析
Sep 13 PHP
PHP下使用CURL方式POST数据至API接口的代码
Feb 14 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
Jun 27 PHP
php支付宝手机网页支付类实例
Mar 04 PHP
详解PHP实现执行定时任务
Dec 21 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
Apr 20 PHP
php微信公众平台开发之微信群发信息
Sep 13 PHP
PHP类的自动加载与命名空间用法实例分析
Jun 05 PHP
详解PHP用substr函数截取字符串中的某部分
Dec 03 #PHP
微信公众平台开发(五) 天气预报功能开发
Dec 03 #PHP
php die()与exit()的区别实例详解
Dec 03 #PHP
详解Yii2 rules 的验证规则
Dec 02 #PHP
Yii框架数据模型的验证规则rules()被执行的方法
Dec 02 #PHP
thinkPHP统计排行与分页显示功能示例
Dec 02 #PHP
thinkPHP交易详情查询功能详解
Dec 02 #PHP
You might like
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
Bootstrap整体框架之JavaScript插件架构
2016/12/15 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python 批量将中文名转换为拼音
2021/02/07 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
图书室管理制度
2014/01/19 职场文书
教师新年寄语
2014/04/03 职场文书
单位法定代表人授权委托书
2014/09/20 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
花木兰观后感
2015/06/10 职场文书
cf战队宣传语
2015/07/13 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
PHP中多字节字符串操作实例详解
2021/08/23 PHP
Java实现学生管理系统(IO版)
2022/02/24 Java/Android
详细介绍python操作RabbitMq
2022/04/12 Python