html和js上傳多張圖片
最近做畢業設計，其中有一部分需要做個網頁展示效果，網頁上需要進行圖片的上傳。然后去學習了下js，（上傳到后台處理和上傳后在網頁上顯示，這里是選擇文件后在頁面上顯示圖片）。 部分實現參考了博主https://blog.csdn.net/huangzhaoyu123/article/details/104617230的代碼，感謝。
但是原博主上傳多張圖片，沒有對圖片進行排版，圖片顯示很雜亂，另外看了一下他的刪除好像是直接隱藏相關元素。於是重新修改了一下，使用了一個table和滾動條。將所有的圖片存放在表格里，表格的列數是固定的兩列。
html部分
代碼如下：和參考的博主的設計相同，只是將圖片固定放在了一個表格里面。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>人群計數實時識別系統</title>
<link rel="stylesheet" href="style.css">
</head>
<!-- 頭部的提示 -->
<body style="background-image: url('bg.jpg')">
<div class="header clearfix">
<a href=""><img src="LOGO.png" alt=""><span class="logo">上傳多張圖片測試</span></a>
</div>
<!-- 一個橫排框 按鈕選擇圖像或視頻 -->
<div id="main" class="upload_main">
<form id="uploadForm" action="" method="post" enctype="multipart/form-data">
<div class="upload_box">
<div class='upload_main'>
<div class="upload_choose">
<!-- 按鈕選擇文件 -->
<input id="fileImage" onchange="choosefiles()" type="file" size="30" name="fileselect[]" multiple />
</div>
<div id="preview" class="upload_preview" overflow-y :scroll>
<!-- 預覽區域 將它設置為滾動條方便顯示多張圖片 顯示圖片 每一張圖存放在一個表格里面-->
<div class='imgtable'>
<table id="imgViewtb" class="show_imgtable">
<tbody id="imgViewtbody">
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>
</div>
<script src="http://libs.baidu.com/jquery/1.4.4/jquery.js"></script>
<script src="test.js"></script>
</body>
</html>
js部分代碼
js部分的代碼重新修改，沒有按照原博主的代碼來，之前我也沒學過js，只看得懂很簡單的語法，因此直接給input表單綁定了一個上傳文件的函數choosefiles()，該函數的代碼如下，其流程是：獲取選擇的文件信息，可以通過表單的files這個屬性獲得，然后判斷當前表格的行列數，因為圖片存在表格里的，所以每次點擊按鈕上傳后，相關圖片要接着表格中的內容往下走。表格固定的大小是2列。
同時參考了原博主對圖像部分的html設置，即下面代碼里的imghtml變量。原博主直接將這部分放在preview這個div下面。我這里修改的，將它當做表格的一個格子的內容存放。imghtml中會給每個圖片進行一個編號，因此可以通過這個編號實現順序地將圖片擺放在表格里面。
function choosefiles() {
console.log("選擇文件");
// 獲取選擇的文件files 這里沒有添加是不是圖片文件的判斷 略
var files = document.getElementById('fileImage').files;
// 獲取表格的tbody 后面可以通過它的insertRow等方法實現對表格行列的增加
var tb = document.getElementById("imgViewtbody");
var length=files.length; // 選擇的文件數量
console.log("選擇的文件數量是",length);
// 判斷表格中已經存在的圖片 后面繼續選擇索引
// 表格中的圖片是按照兩列擺放的如下。因此可以根據它的索引i確定這張圖應該放在哪一行哪一列
// 圖片0 | 圖片1
// 圖片2 | 圖片3
var rowsNum = tb.rows.length; // 已經表格存在的行數
var totalitemNum = rowsNum *2; // 總的圖片數量 這個值是假設每一行都是兩張圖的情況下 但實際上最后一行可能值放了第一列的圖片
if(rowsNum >0){
// 判斷最后一行是不是兩張圖 注意tb的索引是從0開始 rowsNum表示長度，所以最后一行的索引是rowsNum-1
if(tb.rows[rowsNum-1].cells.length == 1){
totalitemNum = totalitemNum -1; // 最后一行只有一張圖 顯然總的數量應該減1
}
}
$.each(files, function(i, file) { // 這里用each去遍歷files 不用for(var i=0;i< files.length;i++)這種方法，因為循環里面用到了一個re.onload方法，它是異步的，還么有看到js的異步和同步處理，只是在網上看到這個解釋。用for循環遍歷的話，每次取出的值是不正常的，圖片只能讀取到最后一個
console.log("遍歷",i, file);
// files的索引是0開始 但是表格中已經右totalitemNum個圖片 因此索引加上
i = i + totalitemNum;
// imghtml參考的是上面提到的博客的代碼
var imghtml = '<div id="uploadList_'+ i +'" class="upload_append_list"><p><strong>' + file.name.substring(0,10) + '</strong> '+
'<a href="javascript:" class="upload_delete" title="刪除" data-index="'+ i +'">刪除</a><br />' +
'<img name = "docfiless" id="uploadImage_' + i +'" class="upload_image" height="256" width="450"/></p>'+
'<span id="uploadProgress_' + i + '" class="upload_progress">'+'<p>Analyse</p><span></span>'+'<span></span>'+'<span></span>'+'</span>' +
'</div>'+'<div id="result" class="upload_result"></div>';
// 根據圖片索引的特殊 可以看到偶數都是在第一列 奇數序號圖片都是在第二列 如果是偶數 需要給表格新建一行存放圖片
if(i%2==0){
console.log("新建一行",i);
let newRow = tb.insertRow(i/2); // 序號i的圖片對應的是i/2行圖片
let newcell = newRow.insertCell(0); // 然后在新建的這一行，新建第一列
newcell.innerHTML = imghtml; // 那么該行該列的內容就是上面的imghtml
newcell.style.align = "center";
}
else{
console.log("在原始行添加",i); // 奇數直接在它對應的那一行新加一列即可
let y = tb.rows[Math.floor(i/2)].insertCell(1);
y.innerHTML = imghtml;
y.style.align="center";
}
// 上面完成了，但是可以看到imghtml中的圖片 還沒有定義它的src屬性，所以還需要設置src屬性
var imgid = document.getElementById("uploadImage_"+i); // 取出對應的圖片標簽
var re = new FileReader();
re.onload = function(re) {
console.log("imgid獲取序號",i); // 用for循環遍歷files的話 可以看到這里的i始終將是最后一個 就出現問題
if(imgid){
imgid.src = re.target.result; // re.target.result就是讀出的文件base64編碼字符串
}
}
re.readAsDataURL(file);
// imghtml中也添加了一個刪除操作 因此對它綁定一個刪除函數 函數參數是i 表示要刪除的圖片的序號
$("#uploadList_"+i+ "> p > a").click(function(){
deleteItem(i); // 傳入的參數是索引 從0開始
});
});
}
// 獲取當前表格中的圖片數量
function getCurItemNums(){
var tb = document.getElementById("imgViewtbody");
var rowsNum = tb.rows.length; // 已經表格存在的行數
var totalitemNum = rowsNum *2; // 總的圖片數量 這個值是假設每一行都是兩張圖的情況下
if(rowsNum >0){
if(tb.rows[rowsNum-1].cells.length == 1){
totalitemNum = totalitemNum -1; // 最后一行只有一張圖
}
}
return totalitemNum;// 當前的圖像數量
}
// 刪除索引為index的圖片 分析：刪除索引index的圖片后，那么索引在它后面的圖 應該往前移動一個格子 即它后面的圖 ，原先在第一列，應該移動到上一行的第二列 原先在第二列，應該移動到同一行的第一列
// 同時 表格中的原先最后一個圖片的位置 應該空出來了
function deleteItem(index){
console.log("刪除第",index,"個"); // 序號從0開始 index對應的是第
var tb = document.getElementById("imgViewtbody");
var curnums = getCurItemNums(); // 當前的圖像數量
if(curnums == index+1){ // 如果刪除的本身就是最后一個元素 直接刪除即可 不會影響到表格中的其他元素
var row = Math.floor(index/2) ;// 第row行
var cell = index%2; // 第cell列 索引index圖片 對應的行和列是row和cell
tb.rows[row].deleteCell(cell); // 直接刪除它就可以了 // 如果這一行本身只有一個元素的話 執行后 會變成一個空的<tr></tr>， 下一次對其他行列的圖片刪除的時候 getCurItemNums函數的結果返回就不對
if(tb.rows[row].cells.length == 0){
tb.deleteRow(row); // 當前列沒有元素的話，再把當前行刪除了。這樣才是完整的刪除 不會有空的<tr>標簽在
}
}
else{
// 如果不是最后一個元素 那么從index開始 ，依次用index+1的圖片 替換掉當前index位置的圖片即可
for(var i=index;i<curnums-1;i++){
// 讓索引i的圖像變為 i+1的圖像 遍歷到curnums-1即可 因為最后一張圖后面沒有了，直接刪除最后一張即可
console.log("修改圖像",i)
let row = Math.floor(i/2) ;// 第row行
let cell = i%2; // 第cell列
var imgid = $("#uploadImage_"+i)[0]; //取出索引i這個圖片的標簽 修改它的src
imgid.src = $("#uploadImage_"+(i+1)).attr("src"); // 新的src是它下一個的src
// 還要修改每個表格中顯示的文件名 #uploadList_2 > p > strong
var filename = $("#uploadList_"+i+ "> p > strong")[0];
filename.innerHTML = $("#uploadList_"+(i+1)+ "> p > strong").html();
}
// 最后刪除最后一個元素 同樣需要判斷最后一行是不是空的tr然后刪除行
var row = Math.floor((curnums-1)/2) ;// 第row行
var cell = (curnums-1)%2; // 第cell列
tb.rows[row].deleteCell(cell); // 直接刪除它就可以了
if(tb.rows[row].cells.length == 0){
tb.deleteRow(row);
}
}
}
最后的效果
有個bug，就是多次選擇圖片的話，那個上傳圖片按鈕旁邊顯示的文字“*個文件”,這個數量總是最后一次選擇的圖片數量，嘗試隱藏或者修改沒有成功，如果有知道的網友，可以評論說一下。
