2016-03-21 17 views
0

Sürükleyip bırakma işleviyle birden fazla görüntü yüklemesi uygulamak istiyorum ancak özel durumumla ilgili yardımcı olacak çevrimiçi bir şey bulamıyorum.PHP küçük resim ile küçük resimler yükleyin ve sürükle ve bırak

Resim, 16: 9 oranındaki yüklemede resimleri yeniden boyutlandırmak ve karşıya yüklendikçe küçük resimleri göstermek istiyorum. Ayrıca güzel bir yükleme düğmesi olarak stil yazmak için css yazdığım bir etiket kullanıyorum ve bu etiketle gizli bir dosya yükleme girdisi tetikliyorum.

<label for="image">Upload image</label> 
<input type="file" name="images[]" id="image"> 

Ben sunucu ve dönüş için ben resim (ler) yeniden boyutlandırmak bir yükleme komut dosyasına resim (ler) göndermek için tıklayın (onları) Yüklediğiniz her "Yükle görüntü" butonuna jquery ajax kullanmak gerekir düşündüm resme bir yanıt olarak jquery yolunda yeniden boyutlandırılmış görüntü (ler) in küçük resmini gösterebilirim. Aynı şey sürükleme ve bırakma işlevi için de geçerli, bir 'damla' dinliyorum ve bırakılan görüntüleri komut dosyası yüklemek için gönderiyorum.

Şimdiye kadar her şey sorunsuz çalışabilirim, ancak kullanıcı, tüm girdiler bittiğinde form göndermek için kullanıcı bir düğmeyi tıklayana kadar görüntüleri sunucuya yüklemek istemiyorum. Yani benim sorum şu ki görüntüleri bu şekilde manipüle edebilirim ve bir sunucuya yüklemek yerine o son gönder düğmesine tıklanıncaya kadar yerel bir yerde depolayabilir miyim?

Ajax kullanarak sunucumdaki "geçici" bir klasöre görüntüleri yüklediğim ve sonra formdaki "görüntüleri" klasörüne taşıyabildiğim bir çözüm düşündüm ve bu klasörü günlüğüne boşaltmak için cron'u ayarlayın. ama bundan kaçınmak isterim çünkü bir kullanıcı formu doldurmaya başlayabilir, bazı görüntüler yükleyebilir ve daha sonra sadece tıklamaları göndermeden önce cron adımlarını gönderir ve "temp" klasöründeki tüm görüntüleri siler ve görüntüleri kaybolur.

+0

Google "blueimp jquery fileupload" –

+0

zaten görüyorum ki, uygulama için çok "ağır" görünüyor. İhtiyacım olmayan çok fazla özellik var ve ihtiyacım olanlara eklenecek ek eklentiler gerekiyor –

cevap

0

Her dosya seçildiğinde (dosya girişi değişikliğinde) jQuery ile yeni bir dosya girişi oluşturmayı, daha önceki tüm dosya girişlerindeki kimlikleri kaldırmayı ve oluşturduğum yeni için id = "görüntü" ayarlamayı bitirdim. Etikete eklendiğinde hala çalışmaya devam eder.

Önizleme minik resmini göstermek için FileReader kullanıyorum ve yüklenen görüntüyü 16: 9 ölçek (alt-dolgu:% 56.25) olarak ayarlı olarak oluşturduğum küçük resim küçük resimine arka plan olarak ayarlayın. Gerçek görüntü kırpma, form gönderildikten sonra sunucuda gerçekleşir.

İlgili konular