实现效果如下图所示

只需要将下面的html部分的代码放入你的代码即可

（注意引入jQuery文件和html头部的css样式，使用的是ajax提交）

 <!--

 需引入jQuery

 引入样式文件

 引入上传图片预览的代码

 获取上传的图片信息

 在php页面通过 request()->file() 获取图片信息

 -->

 <!-- 上传图片预览时需要的css start 无需改动-->

 <style type="text/css">

     .file {

         position: relative;

         display: inline-block;

         background: #D0EEFF;

         border: 1px solid #99D3F5;

         border-radius: 4px;

         padding: 4px 12px;

         overflow: hidden;

         color: #1E88C7;

         text-decoration: none;

         text-indent: 0;

         line-height: 20px;

     }

     .file input {

         position: absolute;

         font-size: 100px;

         right: 0;

         top: 0;

         opacity: 0;

     }

     .file:hover {

         background: #AADFFD;

         border-color: #78C3F3;

         color: #004974;

         text-decoration: none;

     }

 </style>

 <!-- 上传图片预览时需要的css end -->

 <body>

 <div class="wrapper">

     <div class="container-fluid">

         <!-- end page title -->

         <div class="row">

             <div class="col-12">

                 <div class="card">

                     <div class="card-body">

                         <form class="form-horizontal">

                             <div class="form-group row">

                                 <label class="col-sm-2 col-form-label">实现图片预览效果</label>

                                 <div class="col-sm-10">

                                     <a href="javascript:;" class="file">选择文件

                                         <input type="file" name="img" required>

                                     </a>

                                     <img id="img" height="100" src="">

                                 </div>

                             </div>

                             <div class="form-group row">

                                 <label class="col-sm-2 col-form-label"></label>

                                 <div class="col-sm-10">

                                     <button type="button" class="btn btn-primary" onclick="return preserve()">保存</button>

                                 </div>

                             </div>

                         </form>

                     </div> <!-- end card-box -->

                 </div> <!-- end card-->

             </div><!-- end col -->

         </div>

         <!-- end row -->

     </div>

 </div>

 </body>

 </html>

 <script>

     function preserve()

     {

         var formData    = new FormData();

         var img = $("[name='img']").prop('files')[0];/*获取上传图片的信息*/

         formData.append("img",img);

         $.ajax({

             type : "post",

             url : "{:URL('admin/Banner/shopbanneradd')}",/*此处填写上传路径*/

             processData : false,

             contentType : false,

             data : formData,

             success : function(data) {

             }

         });

     }

 </script>

 <!-- 上传图片并预览的js文件 start  无需改动-->

 <script type="text/javascript">

     var small_img = document.querySelector('input[name=small_img]');

     var img = document.querySelector('input[name=img]');

     small_imgs = document.querySelector('#small_img');

     imgs = document.querySelector('#img');

     if (small_img) {

         small_img.addEventListener('change', function() {

             var file = this.files[0];

             var reader = new FileReader();

             // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片

             reader.addEventListener("load", function() {

                 small_imgs.src = reader.result;

             }, false);

             // 调用reader.readAsDataURL()方法，把图片转成base64

             reader.readAsDataURL(file);

             $("img").eq(0).css("display", "block");

         }, false);

     }

     if(img){

         img.addEventListener('change', function() {

             var file = this.files[0];

             var reader = new FileReader();

             // 监听reader对象的的onload事件，当图片加载完成时，把base64编码賦值给预览图片

             reader.addEventListener("load", function() {

                 imgs.src = reader.result;

             }, false);

             // 调用reader.readAsDataURL()方法，把图片转成base64

             reader.readAsDataURL(file);

             $("img").eq(1).css("display", "block");

         }, false);

     }

 </script>

 <!-- 上传图片并预览的js文件 end -->

over！over！over！

html页面选择图片上传时实现图片预览功能的更多相关文章

  1. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  2. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  3. JavaScript实现本地图片上传前进行裁剪预览

    本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...

  4. jq实现上传头像并实时预览功能

    效果 页面结构 <form action="" name="form0" id="form0"> <input type= ...

  5. 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片

    大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...

  6. 前端的图片压缩image-compressor（可在图片上传前实现图片压缩）

    https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...

  7. 图片上传5-多个图片上传，独立项目Demo和源码

    图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...

  8. HTML5 原生API input file 来实现多图上传，并大图预览

    闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...

  9. 文件上传框的美化+预览+ajax

    1.文件上传基本写法: <input type="file" name="" id="" value="" /&g ...

随机推荐

  1. ffmpeg编码常见问题排查方法

    播放问题排查: 一旦我们遇到视频播放不了,第一件事,就是要找几个别的播放器也播放看看,做一下对比测试,或者对码流做一些基础分析,以便更好的定位问题的源头,而各个平台比较常见的播放/分析工具有如下几个: ...

  2. C++基本数据类型及类型转换

    http://blog.csdn.net/pipisorry/article/details/25346379 c++基本数据类型 什么样的数据算是byte类型,int类型,float类型,doubl ...

  3. 程序猿的量化交易之路（27）--Cointrader之PriceData价格数据（14）

    转载须注明出处:http://blog.csdn.net/minimicall?viewmode=contents,http://cloudtrade.top/ PriceData:价格数据.价格数据 ...

  4. 【BZOJ2400】Spoj 839 Optimal Marks 最小割

    [BZOJ2400]Spoj 839 Optimal Marks Description 定义无向图中的一条边的值为:这条边连接的两个点的值的异或值. 定义一个无向图的值为:这个无向图所有边的值的和. ...

  5. 对H.264帧类型判断方法

    背景描述 我们经常在网络直播推流或者客户端拉流的时候,需要对获取到的H.264视频帧进行判断后处理,我们经常获取到各种不同的视频数据0x67 0x68 0x65 0x61,0x27 0x28 0x25 ...

  6. Spring中的面向切面编程(AOP)简介

    一.什么是AOP AOP(Aspect-Oriented Programming, 面向切面编程): 是一种新的方法论, 是对传统 OOP(Object-Oriented Programming, 面 ...

  7. Write Custom Java to Create LZO Files

    https://cwiki.apache.org/confluence/display/Hive/LanguageManual+LZO LanguageManual LZO     Skip to e ...

  8. Javascript的参数详解

    函数可以有参数也可以没有参数,如果定义了参数,在调用函数的时候没有传值,默认设置为undefined 在调用函数时如果传递参数超过了定义时参数,jS会忽略掉多余参数 jS中不能直接写默认值,可以通过a ...

  9. Nginx安装教程（Centos6.8）

    1.安装gcc gcc-c++(如新环境,未安装请先安装 yum install -y gcc gcc-c++ 2.安装wget yum -y install wget 3.安装PCRE库 cd /h ...

  10. Redis使用经验之谈

    应用场景 保存用户喜欢的商品信息. 类型: Hash, key: usr:${type_id}:${version_id}:${user_id}:${warehouse_id}, field: ${s ...