input[type="file"]上传图片并显示图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none !important;
}
.fileBox{
padding: 40px 0 20px 0;
}
.fileInfo{
font-size: 14px;
margin-bottom: 20px;
}
.close{
width: 20px;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
background: url('img/close.svg') no-repeat center center;
z-index: 99;
}
.baseImg{
width: 200px;
height: 200px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.inputBox{
width: 200px;
height: 200px;
position: relative;
margin-bottom: 30px;
cursor: pointer;
}
.fileInput{
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.add{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
border: 2px solid #9CC7F2;
font-size: 40px;
color: #B4B4B4;
}
</style>
</head>
<body>
<div class="fileBox">
<div class="fileInfo">第一张图</div>
<div class="inputBox">
<i class="close hide" id="close1"></i>
<input type="file" name="pic" class="fileInput" id="pic1" accept="image/gif,image/jpg,image/png" onChange="inputChange('pic1','inputImg1','add1','close1')" />
<img src="" alt="" id="inputImg1" class="baseImg hide"/>
<div class="add" id="add1">+</div>
</div>
</div> <script src="js/jquery.min.js"></script>
<script>
function inputChange(picId,imgId,addId,closeId){
var files = document.getElementById(picId).files;
console.log(files); if(files.length == 0) return;
var form = new FormData(),
file = files[0];
form.append('file', file); var reader = new FileReader();
reader.readAsDataURL(file); //base64
//接收到图片时触发onload
reader.onload = function(e){
var result = reader.result;
console.log(result);
document.getElementById(imgId).src = result;
document.getElementById(imgId).classList.remove('hide');
document.getElementById(addId).classList.add('hide');
document.getElementById(closeId).classList.remove('hide');
}; // $.ajax({
// url: '/upload',
// type: 'POST',
// cache: false,
// data: formData,
// processData: false,
// contentType: false
// }).done(function(res) {
//
// }).fail(function(res) {});
}
// document.getElementById('pic1').addEventListener('click', function() { this.value = ''; }, false); $(function(){
$('.close').click(function(){
$(this).addClass('hide');
$(this).siblings('.add').removeClass('hide');
$(this).siblings('img').addClass('hide');
})
})
</script>
</body>
</html>
效果展示:
上传图片后:
参考文章: https://my.oschina.net/u/2306318/blog/845836
input[type="file"]上传图片并显示图片的更多相关文章
- input[type=file]样式更改以及图片上传预览
以前知道input[type=file]可以上传文件,但是没用过,今天初次用,总感觉默认样式怪怪的,想修改一下,于是折腾了半天,总算是小有收获. 以上是默认样式,这里我想小小的修改下: HTML代码如 ...
- vue <input type="file">上传图片、预览、删除
使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...
- 一、H5(移动端)前端使用input type=file 上传图片,调用相机和相册
一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册
- input[type=file]上传图片及转为base64码以及预览
<input type="file" id="imgurl" capture="camera" accept="image/ ...
- 前端实现input[type='file']上传图片预览效果
众所周知JavaScript在设计上处于安全角度考虑,是不允许读写本地文件的(原因请自行百度): 但是在实际项目应用中,经常会使用到上传图片,并且可以让用户直接预览图片.对于此种做法有两种方法可以实现 ...
- 关于input type=file上传图片的总结
最近比较忙,现在来整理一下近期的成果,方便以后再次使用. 关于图片上传的js 和jq jq $("input").change(function () { var $file = ...
- 上传文件 隐藏input type="file",用text显示
<div> <span>上传文件:</span> <input type="file" id="upload_file" ...
- input type = file 上传图片转为base64
项目背景是做图片识别,接口需要上传图片格式为base64格式的,react项目的相关代码: let reader = new FileReader();reader.readAsDataURL(e.t ...
- input[type=file]中使用ajaxSubmit来图片上传
今天在使用input[type=file]上传图片到服务器时,因为项目要求,并不是像常见的通过按钮来提交表单事件,而是图片上传后就自动执行表单提交事件,将上传的图片信息传给服务器. 刚开始我是这样执行 ...
随机推荐
- viewDidAppear在何时调用?
[viewDidAppear在何时调用] If the view belonging to a view controller is added to a view hierarchy directl ...
- JSTL 标签库<转>
http://elf8848.iteye.com/blog/245559 JSTL标签库,是日常开发经常使用的,也是众多标签中性能最好的.把常用的内容,放在这里备份一份,随用随查.尽量做到不用查,就可 ...
- 深海划水队项目--七天冲刺之day6
站立式会议:由于有位项目组成员回家了,所以由微信群在线讨论代替. 昨天已完成的任务:界面优化,实现方块的移动,旋转和下降. 今天已完成的任务:设置游戏按键,检查重合.检查是否超出边界.检查是否可以下落 ...
- nancyfx中的静态内容文件夹
原文件 DefaultStaticContentsConventions.cs 可以根据需要自定调整,在代码里改的好处是通用.如果通过在webconfig里设置的话,在非iis环境下,可能会有问题. ...
- Creative Cloud 应用程序 | 直接下载
https://helpx.adobe.com/cn/download-install/kb/creative-cloud-apps-download.html
- 二.jenkins构建自动化任务
1,新建任务 打开jinkens, 选择 [新建] -->[输入要构建的项目名称]-->[构建一个自由风格的软件项目]-->[OK] 2, 配置 根据自己的需要选择配置,如下: 代 ...
- Elasticsearch中的索引管理和搜索常用命令总结
添加一个index,指定分片是3,副本是1 curl -XPUT "http://10.10.110.125:9200/test_ods" -d' { "settings ...
- C#基础之流程控制语句详解
C#程序的执行都是一行接一行.自上而下地进行,不遗漏任何代码.为了让程序能按照开发者所设计的流程进行执行,必然需要进行条件判断.循环和跳转等过程,这就需要实现流程控制.C#中的流程控制包含了条件语句. ...
- Android 获取 content layout
if (findViewById(android.R.id.content) instanceof ViewGroup) { ViewGroup mainView = ((ViewGroup)find ...
- A - 最少拦截系统 (最长上升子序列)
点击打开链接 A - 最少拦截系统 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度. ...