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 存储文本换行实现方法
Jan 05 PHP
php获取mysql数据库中的所有表名的代码
Apr 23 PHP
php skymvc 一款轻量、简单的php
Jun 28 PHP
php 文章调用类代码
Aug 11 PHP
PHP版国家代码、缩写查询函数代码
Aug 14 PHP
用PHP实现Ftp用户的在线管理
Feb 16 PHP
php文件操作实例代码
May 10 PHP
Opcache导致php-fpm崩溃nginx返回502
Mar 02 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
Apr 26 PHP
php实现每日签到功能
Nov 29 PHP
laravel使用数据库测试注意事项
Apr 10 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
Home Coffee Roasting
2021/03/03 咖啡文化
php 什么是PEAR?(第三篇)
2009/03/19 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python 类的继承实例详解
2017/03/25 Python
TensorFlow的权值更新方法
2018/06/14 Python
python调用百度REST API实现语音识别
2018/08/30 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
原来我一直安装 Python 库的姿势都不对呀
2019/11/11 Python
python字符串的拼接方法总结
2019/11/18 Python
keras自定义损失函数并且模型加载的写法介绍
2020/06/15 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
生产厂长岗位职责
2014/02/21 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
大学生励志演讲稿
2014/04/25 职场文书
班级体育活动总结
2014/07/05 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
北京天坛导游词
2015/02/12 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
公司酒会致辞
2015/07/30 职场文书
分家协议书范本
2016/03/22 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
Spring this调用当前类方法无法拦截的示例代码
2022/03/20 Java/Android
nginx访问报403错误的几种情况详解
2022/07/23 Servers