Tải hình ảnh lên thẻ img

Question

Giáng sinh vui vẻ cho mọi người.

Tôi có 4 phần chứa mỗi thẻ img trống. Trong khi tải lên một hình ảnh nó phải vừa với phần tương ứng.

Khi tôi nhấp vào "Thêm hình ảnh trong phần 1" và tải lên hình ảnh, nó phải sửa trong Image_1 div như khôn ngoan cả bốn. Nhưng khi tôi chèn chức năng bấm vào trong mã của tôi nó không hoạt động.

Lỗi của tôi ở đây.

<div class="pre_img" > 
    <span> 
    <img class="prw_img" src="http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/128/preview_icon.jpg" alt="your image" /> 
    </span> 
</div> 

<input id="file" type="file" name="files[]" onChange="readURL(this);" /> 

<div id="Image_1"> 
    <button> AddImage to section 1</button> 
    <img id="img_1" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

<div id="Image_2"> 
    <button> AddImage to section 2</button> 
    <img id="img_2" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

<div id="Image_3"> 
    <button> AddImage to section 3</button> 
    <img id="img_3" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

<div id="Image_4"> 
    <button> AddImage to section 4</button> 
    <img id="img_4" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

Heres kịch bản của tôi

function readURL(input) { 
    if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('.prw_img,#img_1').attr('src', e.target.result).width(112).height(112); 
       $('#img_1').css('display','inline'); 
      }; 
      reader.readAsDataURL(input.files[0]); 
    } 
} 

Tôi đã thực hiện một JSBIN cho dễ hiểu tôi havn't thêm một nhấp chuột và cố gắng thêm chức năng mà sau đó toàn bộ kịch bản không làm việc

Answer 1

Cung cấp cho các phần hình ảnh một lớp hoặc đưa chúng vào một vùng chứa để giúp người nghe sự kiện dễ dàng hơn để xử lý

HTML:

<div class="pre_img"> 
    <span><img class="prw_img" src= 
    "http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/128/preview_icon.jpg" alt= 
    "your image"></span> 
    </div> 

    <form> 
    <input id="file" type="file" name="files[]" onchange="readURL(this);"> 
    </form> 

    <div id="Image_1" class="imageSection"><button>AddImage to section 1</button> <img id= 
    "img_1" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_1"></div> 

    <div id="Image_2" class="imageSection"><button>AddImage to section 2</button> <img id= 
    "img_2" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_2"></div> 

    <div id="Image_3" class="imageSection"><button>AddImage to section 3</button> <img id= 
    "img_3" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_3"></div> 

    <div id="Image_4" class="imageSection"><button>AddImage to section 4</button> <img id= 
    "img_4" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_4"></div> 

Sau đó, sử dụng kịch bản sau đây để hiển thị các hình ảnh được tải lên một lớp [trong trường hợp này, lớp activeImage], và để ràng buộc người nghe đến các nút mà Toggles "active" container

Js:

$(".imageSection button").click(function() { 
    $(".imageSection img").removeClass("activeImage"); 
    $(this).parent().find("img").addClass("activeImage"); 
}); 
$(".imageSection:eq(0) img").addClass("activeImage"); 

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function(e) { 
      $('.prw_img,.activeImage').attr('src', e.target.result).width(112).height(112); 

      $('.activeImage').css('display', 'inline'); 
     }; 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

JsBin: http://jsbin.com/imonub/8/edit

Answer 2

Hãy thử với điều này: http://jsbin.com/imonub/7/edit

var id = '1'; // set default id for first img tag 


function readURL(input) { 
if (input.files && input.files[0]) { 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
     $('.prw_img').attr('src', e.target.result).width(112).height(112); 

     $('#img_' + id).attr('src', e.target.result).width(112).height(112); 
     $('#img_' + id).css('display', 'inline'); 
    }; 

    reader.readAsDataURL(input.files[0]); 
} 
} 
$(document).ready(function() { 
$('button').click(function() { 
    id = $(this).html().replace('AddImage to section', '').trim(); 
}); 
});​