上传图片预览-优快云博客

本文链接：https://blog.youkuaiyun.com/clm_comeback/article/details/89532386

本文介绍了一个使用HTML、CSS和JavaScript实现的图片上传功能示例，展示了如何通过前端技术实现文件输入、预览及删除功能。该示例利用了HTML5的File API，jQuery库以及CSS样式来增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="./jquery-3.1.1.min.js"></script>
    <style>
        .a_wrap{
            float: left;
            position: relative;
            cursor: pointer;
        }
        .delImg{
            position: absolute;
            color: #f00;
            margin: 0 0 0 60px;
            font-size: 10px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            vertical-align: middle;
            background-color: #c3c3c3;
        }
        #imgs{
            margin-top: 10px;
        }
        img{
            width: 80px;
            height: 80px;
            margin-right: 10px;
        }
        /* #showImg{
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            height: 100%;
            background: rgba(0, 0, 0, 0.2)
        }
        #bigImg{
            width: 200px;
            height: 200px;
        } */
    </style>
</head>
<body>
    <input type="file" name="uploadfile" id="uploadfile" multiple="multiple" accept=".jpg,.jpeg">  
    <div id="imgs"></div>
    <!-- <div style="display:none" id="showImg" onclick="showImg()"><img src='' id="bigImg"></div> -->
    <script>
        function delImage(obj,a){
            obj.parentNode.parentNode.removeChild(obj.parentNode); //删除图片
            console.log(obj)
            console.log(a)
        }
        // function bigImg(obj){//图片放大显示
        //     $("#bigImg").attr('src',obj.src)
        //     $("#showImg").css('display','block')
        // }
        // function showImg(){  //图片消失
        //     $("#showImg").css('display','none')
        // }
        $('#uploadfile').change(function(){
            var $file = $(this);
            var fileObj = $file[0];//可能选多张图片
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            var imgsHtml = '';
            if (fileObj && fileObj.files && fileObj.files[0]) {
                for (var index = 0; index < fileObj.files.length; index++) {
                    imgsHtml += "<div class = 'a_wrap'><div class='delImg' onclick='delImage(this,"+index+")'>×</div>"+"<a href="+windowURL.createObjectURL(fileObj.files[index])+" target='view_window' class='_image_a'><img src ="+windowURL.createObjectURL(fileObj.files[index])+"></a></div>"
                }
                $("#imgs").html(imgsHtml);
            } 
    
         });
    </script>
</body>
</html>