sürükle ve bırak standart bir html dosyası içine girdi dosyaları

SORU

4 Kasım 2011, Cuma

sürükle ve bırak standart bir html dosyası içine girdi dosyaları

Bu gün ve özel bir kabın içine dosyaları sürükleyip bırakın ve XHR 2 ile yükleme yapabiliriz. Pek çok zaman. Canlı ilerleme barlar vb. Çok güzel şeyler. Example here.

Ama bazen o kadar serinlik istemiyoruz. İstediğim & dosya aynı anda birçok -- -- sürükleyip bırakınstandart HTML dosya içine girdi: <input type=file multiple>.

Bu mümkün mü? Orada bir yol '' doğru dosya isimleri girişi (?) dolgu dosyadan açılır? (Tam filepaths dosya sistemi güvenlik nedeniyle kullanılamaz.)

Neden?Normal bir formu göndermek istiyorum çünkü. Tüm tarayıcılar ve tüm cihazlar için. Sürükle ve bırak & UX hızlandırmak ve kolaylaştırmak için ilerici bir gelişmedir. Standart dosya girişi ile standart formu ( multiple öznitelik) orada olacak. HTML5 geliştirme eklemek istiyorum.

edit
Biliyorumbazısenin tarayıcılarbazen(neredeyse her zaman) dosya giriş içine dosyalar açılır. Chrome genelde böyle yapar biliyorum, ama bazen başarısız olur ve sonra da geçerli sayfa dosyası yükler (büyük bir form dolduruyorsun başarısız). Aptal - ve browserproof istiyorum.

CEVAP

8 NİSAN 2013, PAZARTESİ

Bu "DTHML" bunu yapmanın yolu HTML5. Normal giriş Ricardo Tomasi belirttiği gibi okunur) şeklinde. Eğer bir dosya getirildiğinde ise, form bağlı. Bu eylem sayfası için değişiklik dosyayı bu şekilde karşıya kabul etmeyi gerektirir.

<!DOCTYPE html>
<html>
<body>
<style>
  #holder.hover { border: 10px dashed #0c0 !important; }
</style>
<form method="post" action="http://example.com/">
  <input type="file"><input id="fileDragName"><input id="fileDragSize"><input id="fileDragType"><input id="fileDragData">
  <div id="holder" style="width:200px; height:200px; border: 10px dashed #ccc" id="holder"></div>
</form>
<script>
function readfiles(files) {
  for (var i = 0; i < files.length; i  ) {
    document.getElementById('fileDragName').value = files[i].name
    document.getElementById('fileDragSize').value = files[i].size
    document.getElementById('fileDragType').value = files[i].type
    document.getElementById('fileDragData').value = files[i].slice();
    reader = new FileReader();
    reader.onload = function(event) {
      document.getElementById('fileDragData').value = event.target.result;}
    reader.readAsDataURL(files[i]);
  }
}
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  readfiles(e.dataTransfer.files);
} 
</script>
</body>
</html>

Eğer tüm pencerenin bırakma bölgesi, How do I detect a HTML5 drag event entering and leaving the window, like Gmail does? bakın yapabilirsen daha da patron

Bunu Paylaş: