[英]Upload Image in a img tag
祝大家聖誕快樂。
我有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 ,我沒有添加點擊並嘗試添加該功能,所以整個腳本無法正常工作
給圖像部分一個類,或將它們包含在容器中以使事件偵聽器更易於處理
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
試試這個: 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();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.