JavaScript wybierając obraz do znacznika img

Question

Mam fałszywy system profili dla projektu klasowego, wymaga on zdjęcia profilowego i wymaga opcji zmiany go lokalnie (z dysku twardego). Mam działający znacznik img, który domyślnie zawiera obraz zastępczy, a po kliknięciu przycisku change picture otwiera się okno dialogowe otwierania pliku. Teraz wystarczy tylko ustawić link do obrazu dla tagu img z wybranym obrazem. To jest to, co do tej pory miałem.

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

Wiedząc o tym nie można zrobić, jak mogę mieć obraz wybrany zostać dodany anonimowo użytkownika do imgur i korzystając z tego linku?

Answer 1

Wierzę, że kod jest:

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

Aktualizacja po komentarzu AstroCB za:

Mogłeś wtedy użyć:

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

lub coś podobnego nie jestem 100% pewna, z Składnia może ktoś może pomóc ci nieco więcej

Answer 2

Cóż, macierzysty interfejs przesyłania plików (as I've found) nie pozwala na to, zakładając, że pracujesz tylko po stronie klienta.

Jedyny przypadek, w którym <input type="file"/> kiedykolwiek przyda Ci się, to form, który jest przesyłany do serwera, ponieważ zabezpieczenia przeglądarki uniemożliwiają wykonanie z nią jakichkolwiek innych czynności.

Nowoczesne przeglądarki dadzą fałszywą ścieżkę do pliku po stronie klienta w wyniku przesłania pliku, aby zapobiec złośliwemu działaniu systemu plików użytkownika.

Jednak myślę, że Ink Filepicker API zapewnia dokładnie taką funkcjonalność, jakiej szukasz. Gdy użytkownik prześle plik, zwróci obiekt zawierający nazwę pliku i adres URL wskazujący lokalizację pobierania, co jest dokładnie tym, czego szukasz (to wypełniłoby atrybut src Twojego obrazu).

To naprawdę proste w konfiguracji.

Po pierwsze, załóż darmowe konto i zgarnij klucz API. W swojej head, ustawić go tak:

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

Wtedy masz dostęp do wszystkich funkcjonalności API.

Aby zrobić to pytasz, musisz utworzyć przycisk tak:

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

kliknięcie na niego będzie produkować dialogowe dla użytkownika, aby wybrać plik, który wygląda tak:

Następnie należy utworzyć funkcję obsługi:

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

Okazało się, że jest to niezwykle przydatny interfejs API: here are the docs.

Demo

Answer 3

Można spróbować to za pomocą czytnika plików w 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

Jest FileReader.readAsDataURL (patrz odpowiedź Indry), a także 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; 
    }; 
}