使用jQuery预览和删除图像

Image preview and remove with jQuery

本文关键字：删除 图像 jQuery 使用      更新时间：2023-09-26

我在jquery中对图像预览进行编码时遇到问题。

我想在上传我的服务器之前向用户显示多冲洗的图像。每个图片上都有一个取消按钮。如果单击此按钮，上的照片将从预览中删除。

单击保存按钮后，将所有预览图像保存到我的服务器。

我需要它，请帮我：）

<script type="text/javascript">
        $('#images').on('change',function(e){
            var files=e.target.files;
            $.each(files, function(i,file){
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    var preDiv=document.querySelector("#imgs ul");
                    var template="<li class='col-md-3 col-sm-4 col-xs-6'><img src='"+e.target.result+"'/><span class='glyphicon glyphicon-remove cancel'></span></li>";
                    preDiv.innerHTML+=template;
                };
            });
        });

        $(".cancel").click(function(){
            $(this).parent().remove();
        });
    </script>

已解决问题。

在行中添加了span元素onclick方法：

var template="<li class='col-md-3 col-sm-4 col-xs-6'><img src='"+e.target.result+"'/><span class='glyphicon glyphicon-remove cancel' onclick='imgRemove(this)'></span></li>";

并创建了这种方法：

function imgRemove(ths)
            {
                $(ths).parent().remove();
            }
相关文章：