在列表中上载照片

Upload a photo in list

本文关键字：照片 上载 列表      更新时间：2023-09-26

我正在制作一个照片列表，并使用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;
}

演示：此处。

您有两个问题：

▶；您尚未加载jQuery。

▶；不存在FileReader.results属性。

为了做到这一点：

▶；添加jQuery的最新版本。

▶；将var source = e.target.results;更改为var source = e.target.result;

jsFiddle:→在这里

代码段：

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>

相关文章：