Yerel görüntüleri, bir form aracılığıyla yüklemeden önce önizlemek mümkün mü?

Question

Daha spesifik olmak gerekirse, resimler için kullanılan bir veya daha fazla dosya giriş alanı olan bir form kullanmak istiyorum. Bu alanlar değiştirildiğinde, verileri sunucuya göndermeden önce ilişkili görüntünün bir önizlemesini göstermek istiyorum.

Birçok javascript yaklaşımı denedim, ancak her zaman güvenlik hatalarıyla karşılaşıyorum. Elimde olmayan kullanıcılar için çözümün hassas bir şekilde düştüğü sürece, java veya flaş kullanmayı düşünmüyorum. (Önizlemeyi alamazlardı ve rahatsız edici bir şey bulamazlardı 'bu şeyi yükle')

Bunu basit, yeniden kullanılabilir bir şekilde yaptı mı?

P.S. Kum havuzunun olduğunu biliyorum, ama sandbox karartılmış tüm pencereleri olan karanlık, kilitli bir odada mı olmalı? Bir görüntüyü önizlemek için önizleme yapmak üzere

Answer 1

Here's a jQuery + PHP script.

Answer 2

JavaScript'in güvenlik nedeniyle, yerel dosya sistemine erişimi yoktur.

Answer 3

İlk adım görüntü yolunu bulmaktır. JavaScript'in bir dosya adı/yol için yükleme denetimini sorgulamasına izin verilir, ancak (güvenlik nedeniyle) çeşitli tarayıcılar, JS motoruna kullanıcıya gösterdiklerinden farklı şeyler gösterirler - dosya adını sağlam tutmaya eğilimli olurlar, böylece en azından doğrulama yapabilirler onun uzantısı, ancak c:\fake_path\ veya dosya adına eklenmiş benzer şekilde gizlenmiş bir şey alabilirsiniz. Bunu çeşitli tarayıcılarda denemek, gerçek bir yol olarak neyin döndüğünü ve neyin sahte olduğunu ve neyin nerede olduğu hakkında bir fikir verecektir.

İkinci adım görüntüyü görüntülüyor. Kullanıcı tarayıcısı file:// şemasına izin veriyorsa, yollarını biliyorsanız, img etiketleriyle file:// kaynak URL'leri aracılığıyla yerel görüntüleri görüntülemek mümkündür. (Firefox varsayılan olarak yoktur.) Böylece, kullanıcıya görüntünün tam yolunun ne olduğunu söylemesini sağlayabilirsiniz, en azından yüklemeyi deneyebilirsiniz.

Answer 4

Sadece bunu gerçekleştiren Java uygulamalarını gördüm, örneğin, Facebook'ta görüntü yükleme uygulaması. Java yaklaşımının dezavantajı, kullanıcının çalıştırılmadan önce uygulamaya başlamasının istenmesidir, bu bir çeşit rahatsızlıktır, ancak bu uygulama, uygulama önizlemeleri içeren bir dosya tarayıcısı sunma veya kullanıcıya izin veren daha ilginç şeyler yapma olanağını sağlar. dizinin tamamını yüklemek için

Answer 5

Süslü şeylere gerek yok. Tek ihtiyacınız olan görüntü src olarak kullanılabilecek bir URL oluşturan ve yerel bir dosyadan doğrudan gelebilen createObjectURL işlevidir.

Kullanıcının bilgisayarından bir dosya giriş öğesi (<input type="file" />) kullanarak birkaç görüntü seçtiğinizi varsayalım. İşte bunun için resim dosyaları için önizleme oluşturmak gibi olacaktır:

function createObjectURL(object) { 
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object); 
} 

function revokeObjectURL(url) { 
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url); 
} 

function myUploadOnChangeFunction() { 
    if(this.files.length) { 
     for(var i in this.files) { 
      var src = createObjectURL(this.files[i]); 
      var image = new Image(); 
      image.src = src; 
      // Do whatever you want with your image, it's just like any other image 
      // but it displays directly from the user machine, not the server! 
     } 
    } 
} 

Answer 6

Bu yaklaşım deneyebilirsiniz, o IE üzerinde çalışmıyor görünse de.

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

Kodun basit ve hızlı.

ben kaynak ölür ihtimale kodu buraya koyun:

Senaryo: HTML'de

<!-- Assume jQuery is loaded --> 
    <script> 
     function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      $('#img_prev') 
       .attr('src', e.target.result) 
       .width(150) 
       .height(200); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
     } 
    </script> 

:

<!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
     <input type='file' onchange="readURL(this);" /> 
     <img id="img_prev" src="#" alt="your image" /> 
    </body>