This article mainly introduces the image upload function of thinkphp and jquery image preview effect in detail. It has certain reference value. Interested friends can refer to it.
First, the renderings:
Ignore the file button style first
Click to select a picture (browse) and select a picture at random
js code is as follows
//上传图片立即预览 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' style="max-width:90%"+path+"'/ alt="thinkphp jquery implements image upload and preview effects" >"; //document.getElementById("img1").src = path; } } }
html code, actually it is not important
<p class="form-group has-success has-feedback"> <label for="info_photo" class="col-sm-2 control-label">物品图片</label> <p 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> </p> </p> <p class="form-group has-success has-feedback"> <label for="info_desc" class="col-sm-2 control-label"><span style="color: red;">* </span> 详细描述</label> <p class="col-sm-10"> <textarea class="form-control" rows="5" id="info_desc" name="info_desc" placeholder="如需补充,请填写..." title="可包含中文数字和常用字符"></textarea> <p id="photo_info" class="photo_info"></p> </p> </p>
The css code is not uploaded
By the way, I would like to add the thinkphp upload image code, copy the entire release message
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('发布失败,请先登录'); } }
Related recommendations:
Implementation of image upload plug-in based on ThinkPHP5.0
jQuery implementation of image upload with local preview function
The above is the detailed content of thinkphp jquery implements image upload and preview effects. For more information, please follow other related articles on the PHP Chinese website!

thinkphp是国产框架。ThinkPHP是一个快速、兼容而且简单的轻量级国产PHP开发框架,是为了简化企业级应用开发和敏捷WEB应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。

本篇文章给大家带来了关于thinkphp的相关知识,其中主要介绍了关于使用think-queue来实现普通队列和延迟队列的相关内容,think-queue是thinkphp官方提供的一个消息队列服务,下面一起来看一下,希望对大家有帮助。

thinkphp基于的mvc分别是指:1、m是model的缩写,表示模型,用于数据处理;2、v是view的缩写,表示视图,由View类和模板文件组成;3、c是controller的缩写,表示控制器,用于逻辑处理。mvc设计模式是一种编程思想,是一种将应用程序的逻辑层和表现层进行分离的方法。

本篇文章给大家带来了关于thinkphp的相关知识,其中主要介绍了使用jwt认证的问题,下面一起来看一下,希望对大家有帮助。

thinkphp扩展有:1、think-migration,是一种数据库迁移工具;2、think-orm,是一种ORM类库扩展;3、think-oracle,是一种Oracle驱动扩展;4、think-mongo,一种MongoDb扩展;5、think-soar,一种SQL语句优化扩展;6、porter,一种数据库管理工具;7、tp-jwt-auth,一个jwt身份验证扩展包。

thinkphp查询库是否存在的方法:1、打开相应的tp文件;2、通过“ $isTable=db()->query('SHOW TABLES LIKE '."'".$data['table_name']."'");if($isTable){...}else{...}”方式验证表是否存在即可。

本篇文章给大家带来了关于ThinkPHP的相关知识,其中主要整理了使用think-queue实现redis消息队列的相关问题,下面一起来看一下,希望对大家有帮助。

在thinkphp3.2中,可以利用define关闭调试模式,该标签用于变量和常量的定义,将入口文件中定义调试模式设为FALSE即可,语法为“define('APP_DEBUG', false);”;开启调试模式将参数值设置为true即可。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Linux new version
SublimeText3 Linux latest version

SublimeText3 Chinese version
Chinese version, very easy to use

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Mac version
God-level code editing software (SublimeText3)
