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

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

转载作者：qq735679552 更新时间：2022-09-27 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章thinkphp 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( 
         '发布失败,请先登录' 
         ); 
        
         }  
        
         }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

最后此篇关于thinkphp jquery实现图片上传和预览效果的文章就讲到这里了,如果你想了解更多关于thinkphp jquery实现图片上传和预览效果的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： Yii2中cookie用法示例分析

文章推荐： PHP socket 模拟POST 请求实例代码

文章推荐： JDK1.6“新“特性Instrumentation之JavaAgent(推荐)

文章推荐： Yii2简单实现给表单添加验证码的方法

javascript - 如何获取另一个网站的屏幕截图/预览
有没有办法获取其他网站页面的屏幕截图？例如:您在输入中引入一个网址，按 Enter 键，然后脚本会为您提供所输入网站的屏幕截图。我设法使用 headless 浏览器来完成此操作，但我担心这可能会占用
ios - 预览 UICollectionViewCell
我如何在 UICollectionView 中添加下一个单元格的预览，当当前单元格被滑动时显示？这样感觉就像一堆卡片。我从 Chrome 的 iOS 应用程序及其标签切换器的实现中汲取了很多灵感。任何
javascript - 预览/摘要页面
HTML javascript 编程新手，我的页面实现有问题。我创建了多页 HTML 表单布局(使用 div)，它运行 4 个页面，大约有 140 个输入值(大多数是可选值)。我需要在实际提交之前实现
python - QFileDialog 预览
我正在尝试让 Qt5 QFileDialog 在选择图像打开时显示图像预览。方法一:扩展QFileDialog 我用了this implementation of the dialog它适用于 Qt
由于缺少程序集，TFS(预览)构建失败？
我是 TFS 的新手，并尝试通过托管的 TFS (tfspreview.com) 进行我的第一次自动构建，但由于缺少程序集而失败。我在解决方案中的一个项目引用了 Microsoft.WindowsA
xcode - 如何修复多个 SwiftUI 预览
我正在使用 SwiftUI 并编写了以下示例来展示我遇到的问题。当我添加多个按钮或多个文本时，它会创建两个单独的预览，但是当我在设备上运行应用程序时，它们会同时加载。附上一张照片: 我清理了我的构建文
swift - 从代码覆盖率中排除 SwiftUI 预览？
我无法将代码覆盖率提高到最低。 90% 因为 XCode 考虑了 PreviewProvider。我该怎么办？删除所有 SwiftUI 预览？或者有没有一种方法可以排除一些带有“PreviewPro
twitter - 如何确保链接支持 Twitter 预览？
首先，请注意我搜索了一个 SocialMediaStackExchange 来问这个问题，但似乎没有。这就是我想知道的。向 twitter 发布推文时，如果它是 youtube 链接或特定网站的
javascript - 谷歌地图API自动完成显示位置的 map 预览
我正在使用谷歌地图 API 自动完成来获取搜索的机构的城市和国家/地区。为此，我有一个输入字段和搜索位置的 map 预览。这是 jsfiddle，但它目前不起作用(https://jsfiddle.n
php - OpenCart mp3 预览
在 OpenCart 商店中提供音频预览的最佳方法和播放器是什么？这将涉及上传完整轨道，然后提取要播放的部分最佳答案 m3psplt是迄今为止您最好的选择。有时安装起来有点冒险(特别是在 Cent
django - 预览 PDF 文档
如果我运行: 127.0.0.1:8000/document/1/preview 此 pdf 文件已下载。我需要在 HTML 中显示它(带有打印功能的预览)。怎么做？ views.py from x
wagtail - 预览 Wagtail 页面和获取相关内联时出错
我在预览 Wagtail 页面时遇到错误，但在发布和实时查看时一切正常。我的设置是这样的: from django.db import models from modelcluster.fields
docker - Mattermost docker 预览
我是一个新手，我一直在尝试在 docker 上安装 Mattermost(slack 替代方案)的预览版来尝试一下。我一直遵循官方指南。拱门 Install Docker using the fol
django - 预览 PDF 文档
如果我运行: 127.0.0.1:8000/document/1/preview 此 pdf 文件已下载。我需要在 HTML 中显示它(带有打印功能的预览)。怎么做？ views.py from x
wagtail - 预览 Wagtail 页面和获取相关内联时出错
我在预览 Wagtail 页面时遇到错误，但在发布和实时查看时一切正常。我的设置是这样的: from django.db import models from modelcluster.fields
.net - 预览 .NET 颜色
VS 调试器给我: _Color = "{Name=ff000040, ARGB=(255, 0, 0, 64)}" 我怎样才能“看到”什么颜色？我尝试了一个 html 页面: ________
django - 脆表单布局中的 ImageField 预览
我想显示来自 ImageField 的图像。我正在使用 Django crispy forms 。似乎我需要使用 HTML 布局助手，但我不确定如何在此处访问模板变量。以下呈现一个空白图像标签: H
未显示 Android Studio 预览
The following classes could not be instantiated: androidx.fragment.app.FragmentContainerView (Open C
mysql - 预览 MySQL 连接的快速方法是什么？
我正在从事一个涉及数据集之间连接的项目，我们需要允许预览任意数据集之间的任意连接。这很疯狂，但这就是它有趣的原因。这是使用面向所以给定一个连接我想快速显示 ~10 行结果。我一直在围绕不同的方法进行
javascript - 文件上传/预览，无法更改图像尺寸
我正在尝试上传图像并在用户提交之前进行预览，但由于某种原因我无法更改 div 或图像的宽度或高度，并且它会以正常尺寸进行预览。我什至将它设置为 1px x 1px，但它仍然不起作用。 $(functi

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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