上传列表中的一张照片

问题描述：

我正在制作一张照片列表，我正在使用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张图片一样显示他。 –

是你想要做什么添加上载的图像后，你已经有两个图像列表中？ –

答

你有两个问题：

▶你没装jQuery。

▶有没有FileReader.results财产。

为了使这项工作：

▶添加的jQuery最新的版本。

▶变化var source = e.target.results;到var source = e.target.result;

的jsfiddle： → here。

段：

function changePhoto(input) { 
 
    if (input.files[0]) { 
 
    var reader = new FileReader(); 
 
    reader.onload = function(e) { 
 
     var source = e.target.result; 
 
     $(".list").append("<li><img src=" + source + "></li>") 
 
    } 
 
    reader.readAsDataURL(input.files[0]); 
 
    } 
 
} 
 

 
$("#addPhoto").change(function() { 
 
    changePhoto(this); 
 
});

.image { 
 
    height: 100px; 
 
    width: 100px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
<form action=""> 
 
    <input type="file" value="Add new image" id="addPhoto"> 
 
</form> 
 
<ul class="list"> 
 
    <li><img src="https://blog.shareaholic.com/wp-content/uploads/2015/06/shortlink.png" alt="" class="image"></li> 
 
    <li><img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="" class="image"></li> 
 
</ul>

上传列表中的一张照片

相关推荐