JavaScript Bild zu einem IMG-Tag auswählen

Question

Ich habe ein gefälschtes Profilsystem für ein Klassenprojekt, es erfordert ein Profilbild, und es benötigt eine Option, um es lokal zu ändern (von Ihrer Festplatte). Ich habe ein funktionierendes img-Tag, das ein Platzhalterbild als Standard enthält, und wenn Sie auf change picture klicken, wird ein geöffneter Dateidialog geöffnet. Alles, was ich jetzt arbeiten muss, ist, den Bildlink für den Tag img mit dem ausgewählten Bild zu setzen. Das habe ich bisher.

<div id="userphoto"> 
    <a><div class="gravatar-wrapper-128"><img id="image" src="http://blog.ramboll.com/fehmarnbelt/wp-content/themes/ramboll2/images/profile-img.jpg" alt="" class="logo" width="120" height="120"></div></a> 
    <div class="change-picture-slide" style="top: 30px;"> 
     <input accept="image/*" type="file" id="upload" name="upload" style="visibility: hidden; width: 1px; height: 1px" /> 
     <a href="" onclick="changePicture(); return false">Change Picture</a> 
    </div> 
</div> 
<script> 
    function changePicture() { 
     //open the open file dialog 
     document.getElementById('upload').click(); 
     var link = document.getElementById('upload').url; 
     //change picture 
     var img = document.getElementById("image"); 
     img.src = link; 
    } 
</script> 

Mit diesem Wissen kann nicht getan werden, wie kann ich das Bild habe die Benutzer ausgewählt anonym imgur und über diesen Link hochgeladen werden?

Answer 1

Ich glaube, der Code ist:

var link = document.getElementById('unpload').value; 

Update nach AstroCB Kommentar:

Sie könnten dann verwenden:

var link_split = link.split('\'); 
var link = link_split.length; 

Oder etwas Ähnliches Ich bin nicht 100% sicher von der Syntax vielleicht jemand kann Ihnen helfen, ein wenig mehr

Answer 2

Nun, die native Datei Upload-Schnittstelle (as I've found) können Sie das nicht tun, vorausgesetzt, Sie arbeiten nur clientseitig.

Die einzige Zeit, die <input type="file"/> Ihnen jemals nützlich sein wird, ist in einem form, der an einen Server übermittelt wird, weil Browser-Sicherheitsmaßnahmen Sie daran hindern, etwas anderes damit zu tun.

Moderne Browser geben Ihnen einen gefälschten Dateipfad auf der Client-Seite als Ergebnis eines Datei-Uploads, um böswillige Handlungen mit dem Dateisystem des Benutzers zu verhindern.

Allerdings denke ich, die Ink Filepicker API bietet genau die Funktionalität, die Sie suchen. Wenn der Benutzer eine Datei hochlädt, gibt er ein Objekt zurück, das den Namen der Datei und eine URL enthält, die auf den Download-Speicherort verweist. Dies ist genau das, wonach Sie suchen (dies würde das src Attribut Ihres Bilds füllen)).

Es ist wirklich einfach einzurichten, eigentlich.

Melden Sie sich zunächst für ein kostenloses Konto an und greifen Sie auf einen API-Schlüssel zu. In Ihrem head, setzen es wie folgt auf:

<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script> 
<script>filepicker.setKey('API_KEY');</script> 

Dann haben Sie Zugriff auf alle Funktionen der API.

zu tun, was Sie fragen, müssen Sie auf eine Schaltfläche wie diese erstellen:

<button onclick="handleFiles();">Upload Image</button> 

Ein Klick darauf öffnet sich ein Dialog für den Benutzer erzeugen eine Datei auswählen, die wie folgt aussieht:

erstellen Sie dann einen Handler-Funktion:

<script> 
    function handleFiles() { 
     filepicker.pick({ 
      mimetypes: ['image/*'], 
      //you can also define what uploading services you want to use here 
     }, 
     function(e) { //you now have access to the file 
      var link = e.url; 
      //change picture 
      var img = document.getElementById("image"); 
      img.src = link;    
     }); 
    } 
</script> 

Ich habe festgestellt, dass dies eine enorm nützliche API ist: here are the docs.

Demo

Answer 3

Sie können versuchen, diese durch in JavaScript-Datei Leser.

<div id="userphoto"> 
     <div class="gravatar-wrapper-128"><img id="image" src="body-img.jpg" alt="" class="logo" width="120" height="120"></div> 
     <div class="change-picture-slide" style="top: 30px;"> 
      <input accept="image/*" type="file" id="upload" name="upload" onchange="readURL(this);"style="visibility: hidden;" /> 
      <a href="" onclick="changePicture(); return false">Change Picture</a> 
     </div> 
    </div> 
    <script> 
     function changePicture(){ 
      $('#upload').click(); 
     } 
     function readURL(input) 
     { 
      if (input.files && input.files[0]) 
      { 
       var reader = new FileReader(); 
       reader.onload = function (e) 
       { 
        $('#image') 
        .attr('src',e.target.result); 

       }; 
       reader.readAsDataURL(input.files[0]); 
      } 
     } 



    </script> 

Answer 4

Es gibt FileReader.readAsDataURL (siehe Indras Antwort) und auch window.URL.createObjectURL:

function changePicture() { 
    //open the open file dialog 
    document.getElementById('upload').click(); 
    document.getElementById('upload').onchange = function() { 
     var file = this.files[0]; 
     var url = window.URL.createObjectURL(file); 
     document.getElementById('image').src = url; 
    }; 
}