内容正文

这篇文章主要为大家详细介绍了thinkphp上传图片功能，和jquery预览图片效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

先上效果图：

html和js代码如下:

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <!-- 表单提交 -->

    <form action="{:url('Index/uploadImg')}" enctype="multipart/form-data" method="post">

        <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="image" 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>

           <button type="submit">提交</button>

    </form>

</div>

</body>

<!-- js实现图片预览效果 -->

<script type="text/javascript">

    //上传图片立即预览

 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;

   }

  }

 }

</script>

</html>

php代码如下:

<?php

namespace app\index\controller;

use think\Controller;

use think\View;

use think\Request;

class Index extends Controller

{

    public function index()

    {

        $view = new View();

        return $view->fetch();

    }

    public function uploadImg(Request $request)

    {

        if (request()->isPost()) {

            //获取详细描述信息

            $param = $request->post();

            // 获取表单上传文件 例如上传了001.jpg

            $file = request()->file('image');

            // 移动到框架应用根目录/public/uploads/ 目录下

            if($file){

                $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

                if ($info) {

                    $data = ROOT_PATH .DS . 'public/uploads' . DS . $info->getSaveName();

                    echo $data;//输出路径如：C:\phpStudy\WWW\tp_test\\public/uploads\20180727\eb7fa19f0035bf2bdd5e6a3690091d93.jpg

                }else{

                    // 上传失败获取错误信息

                    echo $file->getError();

                }

            }

            //接下来进行入库操作

        } else {

            $view = new View();

            return $view->fetch();

        }

    }

}

原文转载：https://mp.weixin.qq.com/s/wloVsvw4-Aqy2kqwbZgSCQ

ThinkPHP5与JQuery实现图片上传和预览效果的更多相关文章

  1. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  2. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  3. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  4. JQuery插件：图片上传本地预览插件，改进案例一则。

    /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...

  5. jQuery：[1]实现图片上传并预览

    jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...

  6. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  7. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  8. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  9. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. Node.js 回调函数 1) 阻塞 ,同步 2) 非阻塞 ,异步.

    1.阻塞. 同步. 1) 读取的文件: input.txt 菜鸟教程官网地址:www.runoob.com 2) main.js var fs = require("fs"); / ...

  2. Delphi和OutputDebugString

    曾经想要实时监控您的Delphi应用程序,并能够查看日志消息吗?当然,您始终可以在RAD Studio IDE中以完全调试模式运行.另一种方法是输出日志消息,例如输出到文本文件.您还可以使用Outpu ...

  3. python之pandas简单介绍及使用（一）

    python之pandas简单介绍及使用(一) 一. Pandas简介1.Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据 ...

  4. Popover 弹出框 设置top，显示有时是向下的，解决方式

    参数里面有个popper-options,官网给的值是{boundariesElement: 'body', gpuAcceleration: false },将这个加上问题就解决了.

  5. 微软Power BI 每月功能更新系列——11月Power BI 新功能学习

    Power BI Desktop11月产品功能摘要 本月Power BI Desktop 有一个大规模的更新.现在,通常可以使用复合模型在一个模型中将直接查询和导入源组合在一起.UserVoice上的 ...

  6. spring-dao.xml配置问题（一）

    问题描述:对mapper扫描器进行配置时,sqlSessionFactory依赖报错 <!-- 配置sqlSessionFactory --> <bean id="sqlS ...

  7. 一个简单的 IDA f5插件问题分析

    有人提出问题,以下汇编f5结果缺失代码: .text:00000C18 Java_com_a_b_c .text:00000C18 PUSH {R3,LR} .text:00000C1A CMP R2 ...

  8. zedboard开发板上移植opencv代码(立体匹配)

    前言 公司要做立体匹配相关的项目,已有matlab和c++版本,可是不能做到实时显示立体信息,想要硬件实现实时,无奈本渣也是个硬件的新手,先按照实验室lyq同学的思路在zedboard开发板的纯ARM ...

  9. Factor Graph因子图

    参考链接1: 参考链接2: 参考ppt3: Factor Graph 是概率图的一种,概率图有很多种,最常见的就是Bayesian Network (贝叶斯网络)和Markov Random Fiel ...

  10. C++中输出字符到文本文档

    #include <iostream> #include <fstream> //ofstream类的头文件 using namespace std; int main() { ...