溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細介紹了js實現多圖與單圖上傳顯示的代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
前言：
項目中經常會大量的使用到圖片上傳，之前涉及到的時候經常會在網上下載一些素材直接拿過來使用，但是隨著項目的增多發現用的是各式各樣的，導致非常混亂。所以抽空寫了一個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實現多圖與單圖上傳顯示的代碼，就分享到這里了，當然詳細使用上面的不同還得要大家自己使用過才領會。如果想了解更多，歡迎關注億速云行業資訊頻道哦！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
