Laden Sie ein Foto in der Liste

Question

Ich mache eine Liste mit Fotos und ich verwende HTML5 und JavaScript, um ein neues Foto in diese Liste hochzuladen, aber ich habe ein Problem hier. Kann mir jemand dabei helfen?

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; 
} 

Demo:here.

Answer 1

Sie haben zwei Probleme:

▶ Sie haben jQuery nicht geladen.

▶ Es gibt keine FileReader.results Eigenschaft.

---

Um diese Arbeit zu machen:

▶ eine aktuelle Version von jQuery hinzufügen.

▶ ändern var source = e.target.results; zu var source = e.target.result;

---

jsFiddle: → here.

Snippet:

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>