js如何實作多圖與單圖的上傳顯示
- 王林轉載
- 2020-04-10 09:24:591828瀏覽
前言：
專案中常會大量的使用到圖片上傳，之前涉及到的時候常常會在網路上下載一些素材直接拿過來使用，但隨著專案的增加發現用的是各式各樣的，導致非常混亂。所以抽空寫了一個DEMO來梳理下圖片上傳的流暢以及單圖和多圖上傳需要注意的點。
多圖上傳
多圖上傳，這裡只是做了前端的展示效果，實際專案中，多圖上傳應該是每次上傳一張圖片後向後台發送一次請求，後台返回img路徑然後進行展現。
（推薦教學：js教學）
為什麼一定要傳入後台在進行展現呢？
1、如果直接在前台先展現base64圖片路徑，在向後台發送請求。如果介面出現錯誤後，會給使用者產生錯覺，以為圖片上傳成功，而這時後台是沒有接收到圖片的；
2、file檔每次發生變化，會將先前的files檔給覆蓋掉。如果直接展現不用ajax提交後，最後用form提交只會提交最後一張。
<!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;//获取上传文件后的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上傳圖片後的顯示。具體與後台的一些互動可以根據實際專案中的需求進行增加！
以上是js如何實作多圖與單圖的上傳顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！