javascript - 上传和删除图像-6ren

javascript - 上传和删除图像

转载作者：行者123 更新时间：2023-12-03 09:48:20

我的网页上有一个上传按钮，如果我上传一个图像，它应该在下面显示预览，如果我上传另一个图像，它应该显示在图像旁边，第三个图像应该显示在第二个图像旁边，依此类推，一旦我点击“X”，图像就应该被删除。这是我的代码

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">    
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"> 
</script>
<script>
var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
    else {
      var img = input.value;
        $('#img_prev').attr('src',img).height(200);
    }
    $("#x").show().css("margin-right","10px");
}
$(document).ready(function() {
  $("#x").click(function() {
    $("#img_prev").attr("src",blank);
    $("#x").hide();  
  });
 });
 </script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$("input:file").change(function () {
       if ($(this).val() !== "") {
        var file = $('#file_select')[0].files[0];
        console.log(file.size);
        //console.log(file.width);
        var reader = new FileReader();
         var img = new Image();
        var _URL = window.URL || window.webkitURL;
        reader.readAsDataURL(file);
        reader.onload = function(_file) {
            img.src= _file.target.result;
            //$('#img_preview').append('<img src="'+ img.src +'"/>');
            $('#previewPane').append('<img id="img_prev" src="'+ img.src +'"   
alt="your image" /><span id="x">[X]</span>');
            //console.log(img.src);
            console.log(img.width);
         } 
       }
});
});//]]>  

</script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#x { display:none; position:relative; z-index:200; float:right}
#previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' name="file" id="file_select" onchange="readURL(this);" />   
<br/>
<span id="previewPane">
</span>
</section>
</body>
</html>

最佳答案

删除 input 上的 readURL 和 onchange="readURL(this);" ，它正在做同样的事情(我相信) $("输入:文件").change.
创建一个 div.imageContainer 来包裹 img 和 span，因此当 X 在 span 上时code>被点击，它知道要删除哪个图像。
向 $('#previewPane') 添加委托(delegate)点击事件监听器，并让它对源自 的每次点击使用react。 remover，这是在span上添加的类，因此我们不需要在新图像到来时注册每个点击事件。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Image preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">    
</script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"> 
</script>
<script>
    var blank="http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
    $('input[type="file"]').change(function () {
       if ($(this).val() !== "") {
        var file = $('#file_select')[0].files[0];
        console.log(file.size);
        //console.log(file.width);
        var reader = new FileReader();
        var img = new Image();
        var _URL = window.URL || window.webkitURL;
        reader.readAsDataURL(file);
        reader.onload = function(_file) {
            // Create a container for image and span X
            $imageItem = $('<div>').addClass('imageItem');
            $(img).appendTo($imageItem);
            $('<span>').html('x').addClass('remover').appendTo($imageItem);
            img.src= _file.target.result;

            // Append the container to panel
            $('#previewPane').append($imageItem);
            //console.log(img.src);
            console.log(img.width);
        } 
    }

    // Deletegate for dynamically created span, so we don't have to register a
    // new event listener each time a new imageContainer is created.
    $('#previewPane').on('click', '.remover', function() {
        $this = $(this);
        $this.parent('.imageItem').remove();
    });
});
});//]]>

</script>
<style>
article, aside, figure, footer, header, hgroup,
    menu, nav, section { display: block; }
    #x { display:none; position:relative; z-index:200; float:right}
    #previewPane { display: inline-block; }
</style>
</head>
<body>
<section>
<input type='file' name="file" id="file_select"/>   
<br/>
<span id="previewPane">
</span>
</section>
</body>
</html>