内容正文

这篇文章主要为大家详细介绍了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. final视频

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476] 视频链接[https://v.youku.com/v_show/id_ ...

  2. Day6作业及默写

    1.使⽤循环打印以下效果: 1: * ** *** **** ***** for num in range(1,6): print('*' * num) 2: ***** **** *** ** * ...

  3. git 服务器安装流程

    参考:https://git-scm.com/book/zh/v2/%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%8A%E7%9A%84-Git-%E5%9C%A8%E6%9C% ...

  4. 性能测试-8.LR常用函数

    1.变量转参数 lr_save_string("参数内容","param"):将字符串“aaa”或者一个字符串变量,转变成LR的参数{param} 2.参数转变 ...

  5. Cocos2dx 中的点击事件

    简单记录一下2dx的鼠标交互事件.以及精灵绑定盒的点击判定   Layer 子类的 init方法中:   auto listener = EventListenerTouchOneByOne::cre ...

  6. CodeForces - 1101G :(Zero XOR Subset)-less(线性基)

    You are given an array a1,a2,…,an of integer numbers. Your task is to divide the array into the maxi ...

  7. Vue.js学习使用心得（一）

    一.初步了解 Vue.js是一套构建用户界面的渐进式框架,它只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,相当于JavaS ...

  8. P2216 [HAOI2007]理想的正方形（dp+单调队列优化）

    题目链接:传送门 题目: 题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一行为3个整数,分别表 ...

  9. C语言-第一周作业

    要求1: 请在你的PC或者移动设备上安装词典,该词典工具能对计算机术语进行翻译.需要在你的博客中给出安装软件的截图,请确保阅读者能从截图判断出你的被安装的设备是PC或者移动设备.(5经验值) 要求2: ...

  10. Python学习手册

    基础 概念 源码编译为字节码,解释器解释字节码 CPython是python标准实现方式,Jython将源码编译为java字节码,运行在JVM上 优点:快速开发,灵活的核心数据类型,优美的缩进语法,垃 ...