上传并移除图片

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

来源

2015-06-20 Kannan Chakkara

你为什么使用多个jQuery版本的原因？ –

卸下inputreadURL和onchange="readURL(this);"这是做samething（我beleive）与$("input:file").change。
创建div.imageContainer为Wrap都img和span，所以X上点击span时，它知道要删除哪个图像。
添加委派的点击事件监听器$('#previewPane')，并告诉它的每一个是从.remover，这是对跨度的添加类采购click反应，所以我们并不需要当一个新注册的每个点击事件图像即将到来。

<!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>

来源

2015-06-20 10:38:01 fuyushimoya

很简单：


 

 
    
 
$(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); 
 
} 
 

 
});

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

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

来源

2015-06-20 10:39:10 Vikash

上传并移除图片

回答

相关问题