Question

我有关于在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>

Answer 1

解决了问题。

在此行中添加了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();
            }

图像预览并使用jQuery删除

1 个答案: