Anlamak <input type = "file">

Başım ağrıyor ve seçilen görüntüyü bir web sitesinde kullanıyorum.Anlamak <input type = "file">

<input type="file" id="userImage">

Sonra JavaScript bunu yapabilirim dosyayı almak için:

var userImage = document.getElementById('#userImage').files[0];

ı kullanıcı aracılığıyla sistemlerine bir resim seçin sağlayan basit bir web sitesi var diyelim Sorular:

1) Şimdi userImage kullanabilir miyim? Bir tuval üzerine çizmek gibi mi, yoksa önce web sitelerine yüklemem mi gerekiyor?

2) Resmi kullanırsam, web sitesini her kullandığımda yüklemek zorunda mıyım yoksa bellekte mi kalıyor?

3) Görüntünün kullanıma hazır olduğunu nasıl bilebilirim? Yardımlarınız :) cevaplar için

Takibi

Teşekkür için çok

Teşekkür (aynı nedenlerden dolayı tüm görüntüleri önce tuval üzerine çizilmiş başlangıcında önceden yüklenmiş olmalıdır). Bu yüzden html5'te mümkün görünüyor ama henüz evrensel olarak desteklenmiyor gibi görünüyor.

kaynak

2012-08-24 Jamie Fearon

HTML4'te bu mümkün olmazdı, ancak HTML5'te W3 File API'u kullanarak yerel dosyalara erişebilmeniz gerekir. Ancak, farklı tarayıcılar tarafından ne zaman (ve nasıl) destekleneceğinden emin değilim. benim yerel firefox 14.0.1, aşağıdaki kod çalışır ve seçilen dosyanın ikili veri verir:

<html> 
    <body> 
    <script type="text/javascript"> 
     function doIt() { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var img = new Image(); 
      img.src = e.target.result; 
      var c = document.getElementById("canvas"); 
      var ctx = c.getContext("2d"); 
      ctx.drawImage(img,10,10); 
      } 
     ); 
     reader.readAsDataURL(document.getElementById('userImage').files[0]); 
     } 
    </script> 

    <input type="file" id="userImage" /> 
    <button onclick="doIt()">Render Image</button><br/> 
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/> 
    </body> 
</html>

Belki

yapmalısınız:

var reader = new FileReader() 
reader.readAsDataURL(document.getElementById('userImage').files[0]) 
alert(reader.result)

Aşağıdaki sayfa bir zemine bir yerel görüntüyü boyar 2 okumayı düşünün.

kaynak

2012-08-24 10:29:35 tbl

Yanıtlarınız için teşekkürler. Bu yüzden html5'te mümkün görünüyor ama henüz evrensel olarak desteklenmiyor gibi görünüyor. –

+1 - iyi bir çözüm ve kod – techfoobar

http://caniuse.com/#feat=filereader adresindeki FileReader API desteğiyle ilgili güncel bilgileri bulabilirsiniz. – garethm

-3

1) İstemci tarafı komut dosyaları tarayıcı sanal alanında yürütüldüğünden, resmi açamaz veya değiştiremezsiniz. komut dosya sistemi veya kullanıcı dosyaları erişebilirsiniz Eğer blok-blok uzak sunucuda

3) öğeyi bakın

2) Hayır, tarayıcı göndermek kendini dosyasını bir güvenlik sorunu olacak 1 :)

kaynak

2012-08-24 10:15:19 ruX

Bu yanıtı reddeden kullanıcılar için: Şu anda istemciden dosyaya erişim için destek yok – ruX

Anlamak <input type = "file">

cevap

İlgili konular