实现效果如下图所示

只需要将下面的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. tornado之异步web服务二

    前面介绍了异步方法带来的显著性能提升.我们来看下异步使用的方法. 1 首先对于get方法使用tornado.web.asynchronous进行装饰.当使用tornado.web.asynchrono ...

  2. javascript fetch 跨域请求时 session失效问题

    javascript 使用fetch进行跨域请求时默认是不带cookie的,所以会造成 session失效. fetch(url, { method: 'POST', credentials: 'in ...

  3. log4j（转）

    让System.out.println回家种田,换句话说,就是该干嘛干嘛去. 您可能在想: System.out.println几乎在每个Java程序里都有那么几行,如何让他老人家回家种田呢? 我们怎 ...

  4. hdu1015 Safecracker —— 回溯

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1015 代码1: #include<stdio.h>//hdu1015 #include&l ...

  5. 近期测试BUG总结

    前些日子上线了新版的app,在上线后发现了几个重大的bug,在此总结,在以后的测试工作中需要额外的关注. 需求流程bug 页面刷新bug 标签栏刷新bug 第一个bug出现的原因是产品需求与运营实际操 ...

  6. 安装Nginx四层负载均衡

    Nginx1.9开始支持tcp层的转发,通过stream实现的,而socket也是基于tcp通信. stream模块默认不安装的,需要手动添加参数:–with-stream,官方下载地址:downlo ...

  7. tableView滑动时cell消失

    最近做的工程中,出现个奇怪的问题吗,就是上下滑动tableView的时候,cell还未出屏幕就消失了,找了很久找到了原因,是因为界面中需要的cell有很多种,而有的cell的高度是一开始算出来或是固定 ...

  8. [转]text和content方法的区别

    r.text str #字符串方式的响应体,会自动根据响应头部的 字符编码进行解码 r.content bytes #字节方式的响应体,会自动为你解码 gzip 和 deflate 压缩 reques ...

  9. JUC类图

    JUC的类图总览.

  10. JUC包中的锁框架

    JUC包中的锁,包括:Lock接口,ReadWriteLock接口,LockSupport阻塞原语,Condition条件,AbstractOwnableSynchronizer/AbstractQu ...