js实现多图和单图上传显示
更新时间：2019年12月18日 08:36:17 作者：尹南南
这篇文章主要为大家详细介绍了js实现多图和单图上传显示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
项目中经常会大量的使用到图片上传，之前涉及到的时候经常会在网上下载一些素材直接拿过来使用，但是随着项目的增多发现用的是各式各样的，导致非常混乱。所以抽空写了一个DEMO来梳理下图片上传的流畅以及单图和多图上传需要注意的点。
多图上传
多图上传，这里仅仅是做了前端的展示效果，实际项目中，多图上传应该是每次上传一张图片后向后台发送一次请求，后台返回img路径然后进行展现。
为什么一定要传入后台在进行展现呢？
1.如果直接在前台先展现base64图片路径，在向后台发送请求。如果接口出现错误后，会给用户产生错觉，以为图片上传成功，而这时后台是没有接收到图片的；
2.file文件每次发生变化，会将之前的files文件给覆盖掉。如果直接展现不用ajax提交后，最终用form提交只会提交最后一张。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多图上传/单图上传</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 1000px;
height: 120px;
margin: 0 auto;
border: 1px solid #ddd;
margin-top: 20px;
box-sizing: border-box;
padding: 10px;
}
.upload{
width: 100px;
height: 100px;
float: left;
position: relative;
overflow: hidden;
}
.upload input{
position: absolute;
z-index: 1000;
top:0;
left:0;
width: 100%;
height: 100%;
opacity: 0;
}
.upload a{
display: block;
width: 100%;
}
.upload img{
display: block;
width: 100%;
height: 100%;
}
.imgList{
float: left;
overflow: hidden;
}
.imgList .item{
width: 100px;
height: 100px;
margin-right: 20px;
float: left;
position: relative;
}
.imgList .item img{
display: block;
width: 100%;
height: 100%;
}
.imgList .item span{
position: absolute;
top: 0;right: 0;
width: 100%;
background: red;
color:#fff;
height: 20px;
width: 20px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<!-- 放图片的位置 -->
<div class="imgList" id="imgList"></div>
<!-- 上传按钮 -->
<div class="upload">
<input type="file" name="file" value="" multiple accept="image/*" onchange="uploadImg(this);">
<a href="javascript:void(0)" rel="external nofollow" ><img src="z_add.png" alt=""></a>
</div>
</div>
<script>
function uploadImg(obj){
var files = obj.files;//获取上传文件后的fileList
var imgList = [];//声明空数组用来接收上传完成后的图片
for(var i = 0; i<files.length;i++){
var imgUrl = window.URL.createObjectURL(files[i]);//将文件转换成base64 URL格式
imgList.push(imgUrl);//将url压入到数组中 **如果需要图片统一选择完毕后，点击上传按钮统一提交，那么直接拿这imgList给后台传递即可。**
// 循环创建img容器用来放置url在页面上显示
var img = document.createElement('img')
img.setAttribute("src", imgList[i]);
//删除按钮
var close = document.createElement('span')
close.innerHTML="x"
close.className='close'
close.setAttribute('onclick',"imgRemove(this)")
//创建放置img的盒子
var item = document.createElement('div');
item.className='item';
item.append(img)
item.append(close)
var box = document.getElementById("imgList");
box.append(item);
//ajax向后台发送请求
}
}
//删除代码
function imgRemove(obj){
obj.parentNode.remove()
}
</script>
</body>
</html>
单图上传
去掉input中的multiple 属性就变成了单图上传；
<input type="file" name="file" value="" accept="image/*" onchange="uploadImg(this);">
按照上边的代码直接就可以实现单图上传和多图上传。下边在说下单图上传和多图上传提交需要注意的；
1.单图上传可以跟随form表单一起提交，给input一个name值后台就可以提交过去；
2.多图上传不可以跟form一起提交，因为每次上传后file只会保留最新的；可以先通过ajax将图片提交成功后，在form内去循环创建隐藏的input将后台返回的路径设置成改input的val值最后跟随form提交；需要注意隐藏的input的name值写成[]形式，比如：name=“img[]”。这样在form提交的时候后台就可以接受到所有的图片；
以上的代码，适用于前端点击file上传图片后的显示。具体与后台的一些交互可以根据实际项目中的需求进行增加！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了GoJs面板绘图模板go.Panel使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了javascript cookie的基本操作的相关资料,这里对Cookie的操作进行了详细介绍包括获取，新建，设置有效期，添加和删除等，需要的朋友可以参考下2017-07-07
本文主要对js表达式与js运算符进行详细介绍。具有很好的参考价值。下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JS中的事件委托,结合实例形式简单分析了javascript事件委托的概念、功能、使用方法及相关注意事项,需要的朋友可以参考下2018-03-03
JavaScript 是对初学者比较友好的一门编程语言，基本上花个半小时看下语法就能写出能运行的代码。JavaScript 是动态脚本语言，对数据类型没有太多的限制，写起来非常灵活。但正因为如此，初学者如果不深入了解语言本身，往往会犯一些错误，从而导致一些很难发现的 bug。2021-05-05
本篇文章主要介绍了微信小程序（六）：列表上拉加载下拉刷新示例，非常具有实用价值，需要的朋友可以参考下。2017-01-01
这篇文章主要为大家详细介绍了js点击按钮实现图片排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要为大家详细介绍了微信小程序实现弹出层禁止页面滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
有一个数n=5，不用for循环，怎么返回[1,2,3,4,5]这样一个数组2010-10-10
这篇文章主要给大家介绍了关于微信小程序自定义导航的相关内容，文中通过示例代码介绍的非常详细，兼容各种手机,对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
最新评论