将图片上传到图片标签

我有4个部分，每个部分都包含一个空的img标签。在上传图片时，它必须适合相应的部分。

当我点击“在第1部分添加图片”并上传图片时，它必须在Image_1 div中修复，就像明智的所有四个一样。但是，当我插入点击功能在我的代码它不工作。

这是什么我的错误。

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

继承人我的脚本

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]); 
    } 
}

我已经做了JSBIN为了便于理解，我加没有带一个点击尝试添加该功能，那么整个脚本不工作

来源

2012-12-25 Vivek Dragon

我只是检查，它正在为SECTION1仅 – Satya

雅我在剧本中只提到＃img_1 ....我必须点击旁边的按钮，然后上传图片该节 –

你离开上面的示例代码中的表单元素？否则，你错过了标记的重要组成部分... –

为图像部分提供一个类，或将它们包含在容器中以使事件侦听器更容易处理

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>

然后使用下面的脚本来显示上传的图像的一类[在这种情况下，activeImage类]，以及听众结合到切换“活动”容器的按钮

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

来源

2012-12-25 06:37:54 extramaster

+1感谢他的工作很好的边界.... –

试试这个：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(); 
}); 
});

来源

2012-12-25 06:38:12 Anujith

+1感谢他的工作... 。 –

将图片上传到图片标签

回答

相关问题