实现效果如下图所示

只需要将下面的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. Nmap扫描教程之基础扫描具体解释

    Nmap扫描教程之基础扫描具体解释 Nmap扫描基础扫描 当用户对Nmap工具了解后,就可以使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具能够分别对主机.port.版本号.操作系统等实施扫 ...

  2. switch多分枝语句

    package lianxi; //switch多分枝语句 import java.util.Scanner; public class GetSwitch { public static void ...

  3. EasyPusher：基于live555的DarwinInjector实现的RTSP直播推送程序

    先简单介绍一下EasyPusher的功能,后面再对具体内部架构做介绍: EasyPusher:https://github.com/EasyDarwin/EasyPusher EasyPusher是什 ...

  4. Java类加载器( 死磕 4)

    [正文]Java类加载器(  CLassLoader ) 死磕 之4:  神秘的双亲委托机制 本小节目录 4.1. 每个类加载器都有一个parent父加载器 4.2. 类加载器之间的层次关系 4.3. ...

  5. rule-based optimizer cost-based optimizer

    SQL processing uses the following main components to execute a SQL query: The Parser checks both syn ...

  6. TControl，TWinControl和TGraphicControl的显示函数

    -------------------------- 显示隐藏刷新 -------------------------- TControl = class(TComponent)procedure S ...

  7. 【R】R语言生成随机数

    1.概述 作为一种语言进行统计分析,R有一个随机数生成各种统计分布功能的综合性图书馆.R语言可以针对不同的分布,生成该分布下的随机数.其中,有许多常用的个分布可以直接调用.本文简单介绍生成常用分布随机 ...

  8. cc、gcc、g++区别

    gcc是C编译器:g++是C++编译器:linux下cc一般是一个符号连接,指向gcc:gcc和g++都是GUN(组织)的编译器.而CC则一般是makefile里面的一个名字,即宏定义,嘿,因为Lin ...

  9. SIP学习笔记 -- RFC 3261

    1.SDP (rfc 4566)    1)用于交换参数    2)内容分三部分Session description, Time description and Media description ...

  10. LightOJ1138 —— 阶乘末尾0、质因子分解

    题目链接:https://vjudge.net/problem/LightOJ-1138 1138 - Trailing Zeroes (III)    PDF (English) Statistic ...