html页面选择图片上传时实现图片预览功能
实现效果如下图所示
只需要将下面的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页面选择图片上传时实现图片预览功能的更多相关文章
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题
先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...
- JavaScript实现本地图片上传前进行裁剪预览
本项目支持IE8+,测试环境IE8,IE9,IE10,IE11,Chrome,FireFox测试通过 另:本项目并不支持Vue,React等,也不建议,引入JQuery和Vue.React本身提倡的开 ...
- jq实现上传头像并实时预览功能
效果 页面结构 <form action="" name="form0" id="form0"> <input type= ...
- 【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片
大家好,我叫小秃僧 这篇文章是讲解云开发如何上传.下载.预览.删除图片,并且以九宫格展示图片的功能 @ 目录 1. 实现效果 2.JavaScript代码 3.wxml代码 4.wxss代码 1. 实 ...
- 前端的图片压缩image-compressor（可在图片上传前实现图片压缩）
https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...
- 图片上传5-多个图片上传，独立项目Demo和源码
图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...
- HTML5 原生API input file 来实现多图上传，并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
- 文件上传框的美化+预览+ajax
1.文件上传基本写法: <input type="file" name="" id="" value="" /&g ...
随机推荐
- Android自动折行TextView Group
package com.test.testview; import java.util.ArrayList; import android.content.Context; import androi ...
- MVC入门——列表页
创建控制器UserInfoController using System; using System.Collections.Generic; using System.Linq; using Sys ...
- Android-基本控件和详解四种布局方式
转自:https://www.cnblogs.com/ludashi/p/4883915.html 一.常用基本控件 1.TextView 看到Android中的TextView, 我不禁的想到了iO ...
- android-async-http框架
android-async-http 简单介绍:An asynchronous, callback-based Http client for Android built on top of Apac ...
- [工具]利用EasyRTSPClient工具检查摄像机RTSP流不能播放原因以及排查音视频数据无法播放问题
出现问题 我们在做流媒体开发的过程中,进程会出现摄像机RTSP流莫名其妙无法播放的问题,而我们常用的vlc经常是直接弹出一个无法播放的提示框就完事了,没有说明出错的原因,或者在vlc的消息里面能看到日 ...
- 6.5.1.3 Caching SHA-2 Pluggable Authentication
MySQL :: MySQL 8.0 Reference Manual :: 6.5.1.3 Caching SHA-2 Pluggable Authentication https://dev.my ...
- db的操作
'/---------------------------------------------------------------------------------------------- '/ ...
- [自动化平台系列] - 初次使用 Macaca-前端自动化测试(2)
接一下来讲一讲api的使用 http://macacajs.github.io/macaca-wd/api/ var _config = { //本程序的host host: 'http://te ...
- leetcode 747. Largest Number At Least Twice of Others
In a given integer array nums, there is always exactly one largest element. Find whether the largest ...
- html页面表格导出到excel总结
转载:http://www.cnblogs.com/liuguanghai/archive/2012/12/31/2840262.html <table id="tableExcel& ...