Question

我的网页上有图像，我需要在上传新图像时替换图像源。

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"> 
</script>
<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 +'"/>');
        //console.log(img.src);
        console.log(img.width);
    } 
   }
});
});//]]>  

</script>
<input type="file" name="file" id="file_select">
<div id="img_preview"><img class="thisimage" src="image/01.jpg" alt="image">
 </div>

这是我的代码，我需要用第二个上传的图像替换第一个图像源

Answer 1

由于DOM中已经有img元素，因此无需再次附加新的图像元素。只需更改已存在src的{{1}}，如下所示：

<强> DEMO

image

Answer 2

更改

        $('#img_preview').append('<img src="'+ img.src +'"/>');

要

$('.thisimage').attr('src', img.src);

Answer 3

样品

document.getElementById("myImg").src = "hackanm.gif";

您可以在http://www.w3schools.com/jsref/prop_img_src.asp

上详细了解相关信息

替换图像源

3 个答案: