前端js实现图片上传

前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件，对input进行onchange事件的监听，当input的value值改变时代表用户已经上传了图片，而input的value值就是用户上传的图片的相对路径，new一个FileReader对象，将图片转换成base64格式的编码，动态创建img标签并将转换后的编码赋值给img标签的src属性即可。

首先，进行页面布局，页面布局是用的浮动布局。

[html] view plain copy

<div class="content clearFlex">
<form action="" enctype="multipart/form-data">
<div class="upImg clearFlex">
<div class="imgOnloadWrap"></div>
<div class="upWrap">
<div class="fileWrap">
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>
</div>
<div class="imgWrap">
<img src="img/icon6.png" alt="" />
</div>
</div>
</div>
</form>
</div>

其次对页面布局进行样式设计

[css] view plain copy

.content{
width:1000px;
height: 800px;
background:#fff;
border-radius:10px;
padding:10px;
overflow-y: scroll;
margin:0 auto;
border:1px solid #333;
border-color:rgba(169,169,169,1);
}
.upWrap{
width:140px;
height: 80px;
margin:10px;
float: left;
position: relative;
}
.upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file],.upWrap > .imgWrap{
position: absolute;
height: 100%;
width:100%;
top:0;
left:0;
}
.upWrap > .fileWrap > input[type=file]{
z-index: 2;
opacity: 0;
}
.upWrap > .imgWrap{
z-index: 1;
}
.upWrap > .imgWrap > img{
width:100%;
height: 100%;
}
.upedImg{
z-index: 3 !important;
}
.upedImg > span.deleteImg{
position:absolute;
content: 'X';
width:20px;
font-size: 16px;
color:#ff0000;
background:rgba(0,0,0,0.6);
height:20px;
text-align: center;
line-height: 20px;
right:0;
top:0;
z-index:4;
}
.clearFlex:after{
clear: both;
content: '';
display: block;
height: 0;
zoom:1;
}

最后对上传图片进行逻辑交互

[javascript] view plain copy

/*------------------------------上传图片---------------------------*/
function upImg(obj){
var imgFile = obj.files[0];
console.log(imgFile);
var img = new Image();
var fr = new FileReader();
fr.onload = function(){
var htmlStr = '<div class="upWrap">';
htmlStr += '<div class="fileWrap">';
htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" οnchange="upImg(this)"/>';
htmlStr += '</div>';
htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';
htmlStr += '<img src="'+fr.result+'" alt="" />';
htmlStr += '</div>';
htmlStr += '</div>';
$('.imgOnloadWrap').append(htmlStr);
obj.value = '';
}
fr.readAsDataURL(imgFile);
}
/*-----------------------------删除图片------------------------------*/
$(document).on('click','.upedImg .deleteImg',function(){
//处理未来事件
$(this).parent().parent().remove();
})

[html] view plain copy

<div class="content clearFlex">
<form action="" enctype="multipart/form-data">
<div class="upImg clearFlex">
<div class="imgOnloadWrap"></div>
<div class="upWrap">
<div class="fileWrap">
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="upImg(this)"/>
</div>
<div class="imgWrap">
<img src="img/icon6.png" alt="" />
</div>
</div>
</div>
</form>
</div>

其次对页面布局进行样式设计

[css] view plain copy

.content{
width:1000px;
height: 800px;
background:#fff;
border-radius:10px;
padding:10px;
overflow-y: scroll;
margin:0 auto;
border:1px solid #333;
border-color:rgba(169,169,169,1);
}
.upWrap{
width:140px;
height: 80px;
margin:10px;
float: left;
position: relative;
}
.upWrap > .fileWrap,.upWrap > .fileWrap > input[type=file],.upWrap > .imgWrap{
position: absolute;
height: 100%;
width:100%;
top:0;
left:0;
}
.upWrap > .fileWrap > input[type=file]{
z-index: 2;
opacity: 0;
}
.upWrap > .imgWrap{
z-index: 1;
}
.upWrap > .imgWrap > img{
width:100%;
height: 100%;
}
.upedImg{
z-index: 3 !important;
}
.upedImg > span.deleteImg{
position:absolute;
content: 'X';
width:20px;
font-size: 16px;
color:#ff0000;
background:rgba(0,0,0,0.6);
height:20px;
text-align: center;
line-height: 20px;
right:0;
top:0;
z-index:4;
}
.clearFlex:after{
clear: both;
content: '';
display: block;
height: 0;
zoom:1;
}

最后对上传图片进行逻辑交互

[javascript] view plain copy

/*------------------------------上传图片---------------------------*/
function upImg(obj){
var imgFile = obj.files[0];
console.log(imgFile);
var img = new Image();
var fr = new FileReader();
fr.onload = function(){
var htmlStr = '<div class="upWrap">';
htmlStr += '<div class="fileWrap">';
htmlStr += '<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" οnchange="upImg(this)"/>';
htmlStr += '</div>';
htmlStr += '<div class="imgWrap upedImg"><span class="deleteImg">X</span>';
htmlStr += '<img src="'+fr.result+'" alt="" />';
htmlStr += '</div>';
htmlStr += '</div>';
$('.imgOnloadWrap').append(htmlStr);
obj.value = '';
}
fr.readAsDataURL(imgFile);
}
/*-----------------------------删除图片------------------------------*/
$(document).on('click','.upedImg .deleteImg',function(){
//处理未来事件
$(this).parent().parent().remove();
})

前端js实现图片上传相关推荐

手机端移动端的前端原生js裁剪图片上传
手机端移动端的前端原生js裁剪图片上传选择头像时裁剪上传,确保图片是个正方形,不会出现压扁拉伸的现象效果图原理很简单,其实就是用canvas截图出来而已,只是要对比例做一下处理. <!-- ...
如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
js实现图片上传预览功能
js实现图片上传预览功能很多业务场景下,我们需要在用户上传图片前,先预览待上传的图片 <body><input type="file"><img s ...
node.js实现图片上传
两步走战略: 将图片上传到服务器将图片的路径保存到数据库图片上传到服务器下载第三方插件multer npm install multer --save 先写一个上传图片的接口在路由文件夹中创建 ...
JS画板图片上传到服务器Python
上次实验了图片上传方式把客户端图片保存到服务器的方法这次经过实验实现了画板图片直接上传到服务器并保存的方法只要验证了几个概念 js端:base64传送,json传送,XMLHttpRequest, ...
node.js实现图片上传（包含缩略图）
图片上传使用multiparty插件实现上传安装multiparty npm i --save multiparty 代码实现 const multiparty = require('multip ...
关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
js 自定义图片上传
转载于:选择文件的js方法 - 蛙仔 - 博客园 let fileInputEle; let fileInputHandlerDefer = {};// 选择文件 export const getFi ...

前端js实现图片上传

首先，进行页面布局，页面布局是用的浮动布局。

前端js实现图片上传相关推荐

最新文章

热门文章