实现效果如下图所示

只需要将下面的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. EasyDarwin开源流媒体服务器内存管理优化

    -本文由EasyDarwin开源团队成员Fantasy贡献 前言 最近在linux上跑EasyDarwin发现一个很奇怪的问题,当有RTSPSession连接上来的时候,发现进程的虚拟内存映射一下就多 ...

  2. Darwin Streaming Server编译

    EasyDarwin是我们在Darwin Streaming Server的基础上进行开发和扩展的,Windows/Linux编译,包括64位编译补丁,我们都进行了整理和测试,后续还会不断进行迭代和扩 ...

  3. vmware安装操作系统

    安装的时候,直接选择“从光盘或者映像安装”就可以了,很方便的.不需要再去从u盘什么的安装了.

  4. file descriptor 0 1 2 一切皆文件 stdout stderr stdin /dev/null 沉默是金 pipes

    $>emtry_or_create_a_file.f $ll>>append_a_file.f standard output input error $ls -l /usr/bin ...

  5. Gradle sync failed: Connection timed out: connect

    打开AS的project试图,找到gradle目录下的wrapper下面的gradle wrapper.properities找到: distributionUrl=https\://services ...

  6. Shell之内容匹配与格式输出

    对于大文本或者有些特定格式的文本,有时我们要查找特定内容或定位指定的区域,这样就需要内容匹配. 关于内容匹配,我们常使用的有几个命令: grep,支持正则,查找包含有匹配项的行. cut,提取指定的列 ...

  7. (C)struct结构体指针

    结构体指针 指针结构与指针的关系亦有两重:其一是在定义结构时,将指针作为结构中的一个成员:其二是指向结构的指针(称为结构指针). 前者同一般的结构成员一样可直接进行访问,后者是本节讨论的重点. 结构指 ...

  8. Ubuntu安装基础教程

    作者:TeliuTe 来源:基础教程网 二十三.安装Ubuntu14.04 返回目录 下一课 14.04 版安装与前面版本类似,学习中遇到不清楚的地方,可以参考一下前面的内容,操作中注意细心,下面来看 ...

  9. 对xml文件的sax解析（增删改查）之二

    先上代码: package com.saxparsetest; //the filename of this file is :saxparse.java import javax.xml.parse ...

  10. Asterisk 通话过程中执行动作（即applicationmap ）的使用方法和电话转会议的实现

      asterisk在正常通话过程中执行拨号计划中动作是通过feature.conf中的[applicationmap ]下定义的,举例如下: nway-start => *0,callee,M ...