1
我正在製作一張照片列表,我正在使用HTML5和JavaScript上傳該列表中的一張新照片,但這裏有一個問題。任何人都可以幫我解決這個問題嗎?上傳列表中的一張照片
HTML:
<form action="">
<input type="file" value="Add new image" id="addPhoto">
</form>
<ul class="list">
<li><img src="http://https://blog.shareaholic.com/wp-content/uploads/2015/06/shortlink.png" alt="" class="image"></li>
<li><img src="http://http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="" class="image"></li>
</ul>
的JavaScript:
function changePhoto(input) {
if (input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var source = e.target.results;
$(".list").append("<li><img src="+source+"></li>");
}
reader.readAsDataURL(input.files[0]);
}
}
$("#addPhoto").change(function()
changePhoto(this);
});
CSS *:
.image {
height: 100px;
width: 100px;
}
演示:here。
又有什麼問題? –
我無法上傳照片。我的意思是我可以上傳,但我不能像以前的2張圖片一樣顯示他。 –
是你想要做什麼添加上載的圖像後,你已經有兩個圖像列表中? –