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 相关文章推荐
PHP 向右侧拉菜单实现代码,测试使用中
Nov 03 PHP
劣质的PHP代码简化
Feb 08 PHP
php数组声明、遍历、数组全局变量使用小结
Jun 05 PHP
php遍历所有文件及文件夹的方法深入解析
Jun 08 PHP
php使用ob_start()实现图片存入变量的方法
Nov 14 PHP
PHP用户验证和标签推荐的简单使用
Oct 31 PHP
PHP实现模拟http请求的方法分析
Dec 20 PHP
PHP设计模式之原型模式定义与用法详解
Apr 03 PHP
PHP常见数组排序方法小结
Aug 20 PHP
PHP7 mongoDB扩展使用的方法分享
May 02 PHP
PHP swoole和redis异步任务实现方法分析
Aug 12 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
Apr 14 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
PHP 遍历文件实现代码
2011/05/04 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
javascript和HTML5利用canvas构建猜牌游戏实现算法
2013/07/17 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
理解javascript中的闭包
2017/01/11 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
基于JS对象创建常用方式及原理分析
2017/06/28 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
JS数组及对象遍历方法代码汇总
2020/06/16 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Vue环境搭建+VSCode+Win10的详细教程
2020/08/19 Javascript
Windows下用py2exe将Python程序打包成exe程序的教程
2015/04/08 Python
python编码最佳实践之总结
2016/02/14 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
python能开发游戏吗
2020/06/11 Python
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
思想汇报范文
2013/11/04 职场文书
餐饮加盟计划书
2014/01/10 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
市场营销计划书
2015/01/17 职场文书
刑事辩护词范文
2015/05/21 职场文书
工作服管理制度范本
2015/08/06 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers