祝大家圣诞快乐。
我有4个部分,每个部分都包含一个空的img标签。上传图片时,必须将其放入相应的部分。
当我单击“在第1部分中添加图像”并上传图像时,它必须像Image_1 div一样修复所有四个。但是当我在我的代码中插入click函数时,它无法正常工作。
我的错误在这里。
<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 我没有添加点击并尝试添加该功能,然后整个脚本无法正常工作
答案 0 :(得分: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
类],并将侦听器绑定到切换&#34; active&#34;容器
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]);
}
}
答案 1 :(得分: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();
});
});