我要投稿

html图片按钮-HTML实现自定义上传图片按钮并显示图片

bendan520 html

2023-08-21 0 5,621 百度已收录

进不了网站？换个网络试试！

在Web开发中，可以通过类型为file的input标签来实现上传文件的功能。但输入的显示效果只有一键，UI无法改变。如果要实现自定义上传按钮，一般需要将input设置为不可见，然后将input和自定义界面放在同一个div中，并将input放在界面上方：

效果如下：

图片上传.png

这样，自定义按钮效果就完成了。但是，无法以这种方式显示图像。要实现显示上传图片的功能，可以通过以下方式实现：

FileReader 将文件转换为 Base64 以供显示。 FileReader可以异步读取文件并将其转换为可读的代码。我们可以通过输入获取上传图片的文件实例。我们可以通过FileReader将文件实例转换为Base64，然后通过img标签加载图像的Base64编码。


    function showImg(input) {
        var file = input.files[0];
        var reader = new FileReader()
        // 图片读取成功回调函数
        reader.onload = function(e) {
            document.getElementById('upload').src=e.target.result
        }
        reader.readAsDataURL(file)
    }

通过 window.URL.createObjectURL 创建 URL。这样就可以为文件实例创建一个临时url，img可以通过这个url加载图片。由于它是临时 urlhtml图片按钮，因此同一文件实例每次都会创建不同的 url：

   function showImg(input) {
        var file = input.files[0];
        var url = window.URL.createObjectURL(file)
        document.getElemtById('upload').src=url
   }

使用以上方法之一，将showImg方法挂在input的onchange属性上，即可显示图片：

疗效如下：

显示上传的图片.png

在上面的代码中html图片按钮，当点击输入标签时，一次只能选择一张图像。如果要选择多张图像，则必须在输入中添加 multiple 属性：

然后通过多个imgs显示文件上的图片，代码如下：




    
    图片上传


    
    
        
        
        
        
        
        
            上传文件：
            
        
    
    


    function showImg(obj) {
        var files = obj.files
        // document.getElementById("imgContainer").innerHTML = getImgsByUrl(files)
        getImgsByFileReader(document.getElementById("imgContainer"), files)
    }
    // 使用window.URL.createObjectURL(file)读取file实例并显示图片
    function getImgsByUrl(files) {
        var elements = ''
        for (var i = 0; i < files.length; i++) {
            var url = window.URL.createObjectURL(files[i])
            elements += ""
        }
        return elements
    }
    // 使用FileReader读取file实例并显示图片
    function getImgsByFileReader(el, files) {
        for (var i = 0; i < files.length; i++) {
            let img = document.createElement('img')
            img.setAttribute('style', 'width: 40px; height: 40px; vertical-align: middle; margin-right: 5px;')
            el.appendChild(img)
            var reader = new FileReader()
            reader.onload = function(e) {
                img.src = e.target.result
            }
            reader.readAsDataURL(files[i]) 
        }
    }

最终疗效如图所示：

多图上传.png

最近，我做了最终设计，其中一些需要做一个网页来显示疗效，图片需要上传到网页上。然后我去学习了下面的js，（上传到后台处理上传后显示在网页上，这里是选择文件并在页面上显示图像）。部分实现引用了博主的代码，谢谢。

然而，

原来博主上传了多张图片，没有排版图片，图片展示很乱，看了看他的删减后，似乎直接隐藏了相关元素。所以我再次更改了它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，只懂很简单的句型，所以直接在输入表单上绑定一个函数上传文件selectfiles（），函数的代码如下，过程是：获取所选文件信息，就可以通过表单的file属性获取，然后确定当前表的行数和列数，因为表格中存在图片html 图片按钮，所以每次点击按钮上传时，相关图片都跟着表格中的内容。表格的固定大小为 2 列。同时，图片

部分请参考原博主的HTML设置，即以下代码中的imghtml变量。原始博主将此部分直接放在预览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">' + file.name.substring(0,10) + '&nbsp'+ 
        '<a href="javascript:" class="upload_delete" title="删除" data-index="'+ i +'">删除
' +
        ' + i +'" class="upload_image" height="256" width="450"/>
'+
        '<span id="uploadProgress_' + i + '" class="upload_progress">'+'Analyse
'+''+''+'' +
    '

'+'
';
        // 根据图片索引的特殊 可以看到偶数都是在第一列 奇数序号图片都是在第二列 如果是偶数 需要给表格新建一行存放图片
        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); // 直接删除它就可以了  // 如果这一行本身只有一个元素的话 执行后 会变成一个空的， 下一次对其他行列的图片删除的时候 getCurItemNums函数的结果返回就不对
        if(tb.rows[row].cells.length == 0){
            tb.deleteRow(row); // 当前列没有元素的话，再把当前行删除了。这样才是完整的删除 不会有空的标签在
        }
    }
    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); 
        }
    }
}