[html5] 將文件拖放到標準的html文件輸入中


Answers

以下作品在Chrome和FF中,但我還沒有找到涵蓋IE10 +的解決方案:

// dragover and dragenter events need to have 'preventDefault' called
// in order for the 'drop' event to register. 
// See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_operations#droptargets
dropContainer.ondragover = dropContainer.ondragenter = function(evt) {
  evt.preventDefault();
};

dropContainer.ondrop = function(evt) {
  // pretty simple -- but not for IE :(
  fileInput.files = evt.dataTransfer.files;
  evt.preventDefault();
};
<!DOCTYPE html>
<html>
<body>
<div id="dropContainer" style="border:1px solid black;height:100px;">
   Drop Here
</div>
  Should update here:
  <input type="file" id="fileInput" />
</body>
</html>

你可能會想使用addEventListener或jQuery(等)來註冊你的evt處理程序 - 這只是為了簡潔起見。

Question

現在我們可以將文件拖放到一個特殊的容器中,然後用XHR 2上傳它們。 現場進度條等非常酷的東西。 示例在這裡。

但有時我們不想要那麼多涼意。 我想要的是將文件拖放到一個標準的HTML文件輸入中<input type=file multiple>

那可能嗎? 有沒有什麼方法可以用文件放置中的正確文件名(?)“填充”文件輸入? (完整的文件路徑不適用於文件系統安全原因。)

為什麼? 因為我想提交正常表單。 適用於所有瀏覽器和所有設備。 拖放只是漸進式增強,以增強和簡化用戶體驗。 標准文件輸入(+ multiple屬性)的標準表單將在那裡。 我想添加HTML5增強功能。

編輯
我知道在某些瀏覽器中, 有時 (幾乎總是)可以將文件放入文件輸入本身。 我知道Chrome通常會這樣做,但有時會失敗,然後將文件加載到當前頁面中(如果您填寫了表單,則會導致嚴重失敗)。 我想傻瓜式和瀏覽器式的。




//----------App.js---------------------//
$(document).ready(function() {
    var holder = document.getElementById('holder');
    holder.ondragover = function () { this.className = 'hover'; return false; };
    holder.ondrop = function (e) {
      this.className = 'hidden';
      e.preventDefault();
      var file = e.dataTransfer.files[0];
      var reader = new FileReader();
      reader.onload = function (event) {
          document.getElementById('image_droped').className='visible'
          $('#image_droped').attr('src', event.target.result);
      }
      reader.readAsDataURL(file);
    };
});
.holder_default {
    width:500px; 
    height:180px; 
    border: 10px dashed #ccc;
}

#holder.hover { 
    width:400px; 
    height:180px; 
    border: 10px dashed #0c0 !important; 
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}
<!DOCTYPE html>

<html>
    <head>
        <title> HTML 5 </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    </head>
    <body>
      <form method="post" action="http://example.com/">
        <div id="holder" style="" id="holder" class="holder_default">
          <img src="" id="image_droped" width="500" height="180" style="width:500px; height:180px; border: 10px dashed #7A97FC;" class=" hidden"/>
        </div>
      </form>
    </body>
</html>




@BjarkeCK非常棒的作品。 我對他的工作進行了一些修改,將其用作jquery中的方法:

$.fn.dropZone = function() {
  var buttonId = "clickHere";
  var mouseOverClass = "mouse-over";

  var dropZone = this[0];
  var $dropZone = $(dropZone);
  var ooleft = $dropZone.offset().left;
  var ooright = $dropZone.outerWidth() + ooleft;
  var ootop = $dropZone.offset().top;
  var oobottom = $dropZone.outerHeight() + ootop;
  var inputFile = $dropZone.find("input[type='file']");
  dropZone.addEventListener("dragleave", function() {
    this.classList.remove(mouseOverClass);
  });
  dropZone.addEventListener("dragover", function(e) {
    console.dir(e);
    e.preventDefault();
    e.stopPropagation();
    this.classList.add(mouseOverClass);
    var x = e.pageX;
    var y = e.pageY;

    if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
      inputFile.offset({
        top: y - 15,
        left: x - 100
      });
    } else {
      inputFile.offset({
        top: -400,
        left: -400
      });
    }

  }, true);
  dropZone.addEventListener("drop", function(e) {
    this.classList.remove(mouseOverClass);
  }, true);
}

$('#drop-zone').dropZone();

工作小提琴




你可以做什麼,是顯示一個文件輸入並覆蓋它與透明的拖放區域,小心使用file[1]名稱file[1] 。 {請確保您的FORM標籤中包含enctype="multipart/form-data" 。}

然後通過為文件2..number_of_files動態創建更多的文件輸入,讓drop-area處理額外的文件,確保使用相同的基本名稱,適當地填充value-attribute。

最後(前端)提交表格。

處理這種方法所需要的只是改變你的過程來處理一系列文件。




我知道Chrome中的一些技巧。

將文件拖放到拖放區時,您將獲得一個dataTransfer.files對象,即一個“FileList”類型的對象,其中包含您拖動的所有文件。 同時,元素具有屬性“文件”,即相同的“FileList”類型對象。

因此,您可以簡單地將dataTransfer.files對象分配給input.files屬性。




Related