最近做毕业设计，其中有一部分需要做个网页展示效果，网页上需要进行图片的上传。然后去学习了下js，（上传到后台处理和上传后在网页上显示，这里是选择文件后在页面上显示图片）。 部分实现参考了博主/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="/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-1if(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; // 那么该行该列的内容就是上面的imghtmlnewcell.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和celltb.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 > strongvar 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，就是多次选择图片的话，那个上传图片按钮旁边显示的文字“*个文件”,这个数量总是最后一次选择的图片数量，尝试隐藏或者修改没有成功，如果有知道的网友，可以评论说一下。
参考：
TensorFlow+Django实现在线目标检测系统
