Yerel makineden görüntüleri JS nesnesine yükleme, sunucuya yüklenmesini engeller

Question

Bilgisayardan herhangi bir sunucu tarafı bileşeni kullanmadan herhangi bir js nesnesine bir görüntü dosyası yüklemek istiyorum. Örneğin, yerel makineden bir resim seçmek ve bir web sayfasında görüntülemek istiyorum. Sunucuya dosya yüklemekten kaçınmanın bir yolu var mı?

Aslında bir çeşit çoklu resim yükleyici yazmak istiyorum, ancak sunucuya yüklemeden önce, bazı görüntüleri döndürmek, kullanıcı kimliği, resim dosyası adları listesi gibi bazı verileri içeren bir xml dosyası oluşturmak ve tümünü sıkıştırmak istiyorum görüntüleri ve bu xml ve daha sonra sunucuya gönderin. Bunu müşteri tarafında nasıl yapabilirim?

Answer 1

HTML5'te bir yol var, ancak kullanıcının bir düşme hedefine düşmesini veya <input type="file"/> kutusunu kullanmasını gerektirir, aksi halde güvenlik sorunu olur.

File API'sini kullanarak dosyaları okuyabilir ve özellikle görüntü etiketi için içeriği data: URL olarak ayarlamak için FileReader.readAsDataURL yöntemini kullanabilirsiniz.

İşte bir örnek:

$('#f').on('change', function(ev) { 
    var f = ev.target.files[0]; 
    var fr = new FileReader(); 

    fr.onload = function(ev2) { 
     console.dir(ev2); 
     $('#i').attr('src', ev2.target.result); 
    }; 

    fr.readAsDataURL(f); 
});​ 

http://jsfiddle.net/alnitak/Qszjg/

Answer 2

new File APIs kullanarak, yerel diskten içeriğe erişmek mümkündür.

Sayfanıza geleneksel bir <input type="file"> yükleme alanı koyarsınız ve onchange olayını işleyin.

MDN has a good writeup with all of the details.

Sizin olay işleyicisi bir FileListFiles içeren alır. Buradan, görüntünün içeriğini getirmek için FileReader.readAsDataURL(File) numaralı telefonu arayabilir ve ardından bu veri URL'sini bir rotasyon yapmak için <img> veya <canvas>'a iletebilirsiniz.

http://jsfiddle.net/LvAqp/ sadece krom çalışır ve firefox olsa

Sen window.URL nesnesinin createObjectURL yöntemi kullanabilirsiniz

Answer 3

, bu kadar tarayıcı desteği yok

[JavaScript kullanarak tarayıcıya Yerel görüntü yükleyin ait