JavaScript che seleziona l'immagine su un tag img

Question

Ho un sistema di profili falsi per un progetto di classe, richiede un'immagine del profilo e necessita di un'opzione per cambiarlo localmente (dal disco rigido). Ho un tag img funzionante che contiene un'immagine segnaposto come predefinita e quando si fa clic su change picture, si apre una finestra di dialogo Apri file. Tutto ciò di cui ho bisogno di lavorare ora è impostare il collegamento dell'immagine per il tag img con l'immagine che hanno selezionato. Questo è quello che ho finora.

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

Sapendo questo non può essere fatto, come avrei potuto avere l'immagine dell'utente selezionato essere caricati in forma anonima a imgur e utilizzando questo link?

Answer 1

Credo che il codice è:

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

aggiornamento dopo il commento di AstroCB:

È quindi possibile utilizzare:

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

o qualcosa di simile io non sono sicuro al 100% del sintassi forse qualcuno può aiutarti un po 'di più

Answer 2

Bene, l'interfaccia di caricamento file nativo (as I've found) non ti consente di farlo, presupponendo che tu stia lavorando solo sul lato client.

L'unica volta che <input type="file"/> ti sarà mai utile è in un form che viene inviato a un server perché le misure di sicurezza del browser ti impediscono di fare qualsiasi altra cosa con esso.

I browser moderni offrono un percorso file falso sul lato client come risultato di un caricamento di file per impedire azioni dannose con il filesystem dell'utente.

Tuttavia, penso che il Ink Filepicker API fornisce esattamente la funzionalità che stai cercando. Quando l'utente carica un file, restituisce un oggetto che contiene il nome del file e un URL che punta alla sua posizione di download, che è esattamente quello che stai cercando (questo riempirebbe l'attributo src della tua immagine).

È davvero semplice da configurare, in realtà.

Innanzitutto, registrati per un account gratuito e prendi una chiave API. Nella tua head, configurarlo in questo modo:

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

Poi, si ha accesso a tutte le funzionalità della API.

di fare quello che stai chiedendo, è necessario creare un pulsante come questo:

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

Cliccando su di esso produrrà una finestra di dialogo per l'utente di scegliere un file che assomiglia a questo:

Quindi, creare una funzione di gestione:

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

Ho trovato che questa è un'API tremendamente utile: here are the docs.

Demo

Answer 3

Si può provare questo utilizzando lettore di file in javascript.

<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

C'è FileReader.readAsDataURL (vedi risposta di Indra) ed anche 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; 
    }; 
}