本文摘自PHP中文网,作者V,侵删。
前言:
项目中经常会大量的使用到图片上传,之前涉及到的时候经常会在网上下载一些素材直接拿过来使用,但是随着项目的增多发现用的是各式各样的,导致非常混乱。所以抽空写了一个DEMO来梳理下图片上传的流畅以及单图和多图上传需要注意的点。
多图上传
多图上传,这里仅仅是做了前端的展示效果,实际项目中,多图上传应该是每次上传一张图片后向后台发送一次请求,后台返回img路径然后进行展现。
(推荐教程:js教程)
为什么一定要传入后台在进行展现呢?
1、如果直接在前台先展现base64图片路径,在向后台发送请求。如果接口出现错误后,会给用户产生错觉,以为图片上传成功,而这时后台是没有接收到图片的;
2、file文件每次发生变化,会将之前的files文件给覆盖掉。如果直接展现不用ajax提交后,最终用form提交只会提交最后一张。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <!DOCTYPE html>
<html>
<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>
<!-- 放图片的位置 -->
<div id= "imgList" ></div>
<!-- 上传按钮 -->
<div>
<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;
var imgList = [];
for ( var i = 0; i<files.length;i++){
var imgUrl = window.URL.createObjectURL(files[i]);
imgList.push(imgUrl);
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)" )
var item = document.createElement( 'div' );
item.className= 'item' ;
item.append(img)
item.append(close)
var box = document.getElementById( "imgList" );
box.append(item);
}
}
function imgRemove(obj){
obj.parentNode.remove()
}
</script>
</body>
</html>
|
单图上传
去掉input中的multiple 属性就变成了单图上传;
1 | <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上传图片后的显示。具体与后台的一些交互可以根据实际项目中的需求进行增加!
以上就是js如何实现多图与单图的上传显示的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
chrome如何实时修改javascript
详解js中document对象的方法和属性
带你轻松理解kmp算法
js底层是什么语言
js数组常见操作方法介绍
了解js中!/+/-/~ function() {/*...*/}()是什么意思
js如何实现简易计算器
js数组学习之清空全部元素的4种方法(代码详解)
如何实现javascript延时加载
两分钟带你了解js的传值方式
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何实现多图与单图的上传显示