溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)多圖與單圖上傳顯示的代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
前言：
項目中經(jīng)常會大量的使用到圖片上傳，之前涉及到的時候經(jīng)常會在網(wǎng)上下載一些素材直接拿過來使用，但是隨著項目的增多發(fā)現(xiàn)用的是各式各樣的，導(dǎo)致非?；靵y。所以抽空寫了一個DEMO來梳理下圖片上傳的流暢以及單圖和多圖上傳需要注意的點。
多圖上傳
多圖上傳，這里僅僅是做了前端的展示效果，實際項目中，多圖上傳應(yīng)該是每次上傳一張圖片后向后臺發(fā)送一次請求，后臺返回img路徑然后進(jìn)行展現(xiàn)。
（推薦教程：js教程）
為什么一定要傳入后臺在進(jìn)行展現(xiàn)呢？
1、如果直接在前臺先展現(xiàn)base64圖片路徑，在向后臺發(fā)送請求。如果接口出現(xiàn)錯誤后，會給用戶產(chǎn)生錯覺，以為圖片上傳成功，而這時后臺是沒有接收到圖片的；
2、file文件每次發(fā)生變化，會將之前的files文件給覆蓋掉。如果直接展現(xiàn)不用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 = [];//聲明空數(shù)組用來接收上傳完成后的圖片
for(var i = 0; i<files.length;i++){
var imgUrl = window.URL.createObjectURL(files[i]);//將文件轉(zhuǎn)換成base64 URL格式
imgList.push(imgUrl);//將url壓入到數(shù)組中 **如果需要圖片統(tǒng)一選擇完畢后，點擊上傳按鈕統(tǒng)一提交，那么直接拿這imgList給后臺傳遞即可。**
// 循環(huán)創(chuàng)建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)")
//創(chuàng)建放置img的盒子
var item = document.createElement('div');
item.className='item';
item.append(img)
item.append(close)
var box = document.getElementById("imgList");
box.append(item);
//ajax向后臺發(fā)送請求
}
}
//刪除代碼
function imgRemove(obj){
obj.parentNode.remove()
}
</script>
</body>
</html>單圖上傳
去掉input中的multiple 屬性就變成了單圖上傳；
<input type="file" name="file" value="" accept="image/*" onchange="uploadImg(this);">
按照上邊的代碼直接就可以實現(xiàn)單圖上傳和多圖上傳。下邊在說下單圖上傳和多圖上傳提交需要注意的；
1、單圖上傳可以跟隨form表單一起提交，給input一個name值后臺就可以提交過去；
2、多圖上傳不可以跟form一起提交，因為每次上傳后file只會保留最新的；可以先通過ajax將圖片提交成功后，在form內(nèi)去循環(huán)創(chuàng)建隱藏的input將后臺返回的路徑設(shè)置成改input的val值最后跟隨form提交；需要注意隱藏的input的name值寫成[]形式，比如：name=“img[]”。這樣在form提交的時候后臺就可以接受到所有的圖片；
以上的代碼，適用于前端點擊file上傳圖片后的顯示。具體與后臺的一些交互可以根據(jù)實際項目中的需求進(jìn)行增加！
關(guān)于js實現(xiàn)多圖與單圖上傳顯示的代碼，就分享到這里了，當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多，歡迎關(guān)注億速云行業(yè)資訊頻道哦！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼