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 相关文章推荐
腾讯QQ php程序员面试题目整理
Jun 08 PHP
php Smarty 字符比较代码
Feb 27 PHP
php GeoIP的使用教程
Mar 09 PHP
使用迭代器 遍历文件信息的详解
Jun 08 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
Jun 19 PHP
Win2003+apache+PHP+SqlServer2008 配置生产环境
Jul 29 PHP
PHP统计目录大小的自定义函数分享
Nov 18 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
Jan 17 PHP
Laravel实现表单提交
May 07 PHP
php高清晰度无损图片压缩功能的实现代码
Dec 09 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
Sep 02 PHP
php 多继承的几种常见实现方法示例
Nov 18 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
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
jquery 插件学习(二)
2012/08/06 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
关于js函数解释(包括内嵌,对象等)
2016/11/20 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
JavaScript 中的六种循环方法
2021/01/06 Javascript
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python3 Random模块代码详解
2017/12/04 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
python计算日期之间的放假日期
2018/06/05 Python
python读取Excel实例详解
2018/08/17 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
电气自动化个人求职信范文
2014/02/03 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年酒店工作总结
2015/04/28 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫