Sürükle ve bırak, Google Chrome/Krom ve Safari dosya yükleme?

SORU

17 NİSAN 2010, CUMARTESİ

Sürükle ve bırak, Google Chrome/Krom ve Safari dosya yükleme?

Sürükle ve bırak dosya yükleme Firefox 3.6 yapılabilir.

A Google search for html5 drag-and-drop file uploading -gmail gibi şeyler verir:

Bu kılavuzlar, tüm FileReader (veya Firefox 3.6 başka bir tarayıcı Destekleyen getAsBinary ya da kaldırılmış) kullanın.

Ancak Google yakın zamanda sürükle ve bırak Krom yanı sıra Firefox ve Chromium does not have FileReader yükleme dosya izin Gmail için bir güncelleme yayınladı. Her gece en son Krom kullanıyorum, ve FileReader desteklerken değil, sürükle-bırak dosya upload olabilir.

Gördüm biri söz sürükle-bırak ile yükleme olabilir mümkün sürükleyerek üzerine bir <input type="file" />, ama bu sadece destek aynı anda tek bir dosya, bir süre Gmail upload yapabilir birden fazla dosya olmak sürükledi üzerine, demek ki ne yaptıklarını.

Şimdi asıl soru, bunu nasıl yapıyorlar? Nasıl HTML5 dosya yüklemek için Krom destekliyor musunuz? Buna ek olarak, Safari destek olabilir misiniz?

CEVAP

17 NİSAN 2010, CUMARTESİ

EDİT: şimdi FileReader sürüm 7 olarak destekler Google Chrome. Ancak, bu geçici çözüm, hala sürükle ve bırak Safari 5 (Safari 6 henüz piyasaya sürülmedi) yüklemek için gereklidir.

Bir ihtimal the method used in SwellJS kullanmak için:

Bu yüzden: <input type="file" multiple="multiple" /> kullanın

<form method="post" enctype="multipart/form-data" id="uploadform">
  <input type="file" name="dragupload[]" multiple="multiple"
  onchange="if (this.value) document.getElementById('uploadform').submit();" />
</form>

Giriş elemanı opacity: 0 ve yerleştirilmiş olması tarz (kesinlikle) yüklemeler kabul eden bir öğe üzerinde olabilir. Tüm formu iframe "pseudo-Ajax" davranış gibi. bir için içine yerleştirilmiş olabilir Ve yükleme elemanı bir katman bir yere taşınmış kadar gizli olabilir.

Böyle bir iframe gibi görünecektir:

<script>
<!--
  var entered = 0;
-->
</script>
<body ondragenter="entered  ;document.getElementById('uploadelement').style.display='block'" ondragleave="entered--;if (!entered) document.getElementById('uploadelement').style.display='none'">
  <form method="post" enctype="multipart/form-data" id="uploadform">
    Things can be dragged and dropped here!
    <input type="file" id="uploadelement" name="dragupload[]" multiple="multiple" onchange="if (this.value) { document.getElementById('uploadform').submit(); }" style="display:none;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;" />
  </form>
</body>

Bu sadece bittiğinde Safari veya Chrome algılanır (beri diğer tarayıcılar yok destek sürükle ve bırak üzerine <input type="file" /> element) ve kullanılabilir kombinasyonu ile HTML5 drop olay için Firefox 3.6 .

Eğer bu Gmail kullandığı yöntem olduğunu söyleyemem, ama kesinlikle yaklaşık olarak iyi çalışıyor.

Bunu Paylaş: