Question

我的网页上有一个上传按钮，如果我上传了一张图片，它应该在下面显示预览，我上传的另一张图片应该显示在图片旁边，第三张图片应该显示在第二张图片的旁边，依此类推，一旦我点击“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>

Answer 1

删除readURL上的onchange="readURL(this);"和input，$("input:file").change与div.imageContainer做同样的事情（我相信）。
创建img以包裹span和span，因此当点击$('#previewPane')上的X时，它会知道要删除哪个图片。< / p>
向click添加一个委派的点击事件监听器，并告诉它对来自.remover的每个<!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>  <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>作出反应，这是一个跨越的附加类，所以当新图像出现时，我们不需要注册每个点击事件。

private List<Student> getList(){
    List<Student> students = new ArrayList<Student>();
    Connection con = ....; //Retrieve your connection the way you want
    ResultSet rs = con.createStatement().executeQuery("select name, id from students order by id");
    while (rs.next()){
        students.add(new Student(rs.getString(1), rs.getInt(2)));
    }
    con.close();
    return students;
}

Answer 2

很简单：

＆＃13;

 

   
 $(function(){
    $('input[type=file]').change(previewFile);
   
    
 function previewFile() {
     var el=$('#preview');
  var preview = $(document.createElement('img'))[0];
     preview.height=200;
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
  }

  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
     var imgdiv=$(document.createElement('div')).append(preview).append('<span>x</span>');
      $(imgdiv).find('span').click(function(){
       $(this).parent().remove();
    });
     el.append(imgdiv);
}

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" ><br>
<div id="preview"></div>

＆＃13;

参考：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

上传和删除图片

2 个答案: