2

ドラッグ アンド ドロップで画像をアップロードする方法を知りたいのですが、ユーザーが画像を特定の div 内またはボディにドロップしてアップロードしたときにサーバーに通知する方法がわかりません。ブラウザ、つまり、ff、chrome、safari。ありがとうございました ：）

4

2 に答える 2

5

私はあなたがあまり研究をしていないと言うことができます.

短い答えは、いいえです。ユーザーがクライアント ウィンドウ内に画像をドロップしたことを検出する、すべての主要なブラウザーでサポートされている方法はありません。

また、Rajat Saxena がコメントで指摘したように、drop イベントで ajax リクエストを送信して、サーバーにファイル ドロップを通知する必要があります。

HTML5

HTML5 と JavaScript を使用して、デスクトップからブラウザーにドラッグ アンド ドロップします。

<div id="drop_zone">Drop files here</div>
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                  '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>

JQuery

JQuery (Firefox および Chrome) を使用して、デスクトップからブラウザーにドラッグ アンド ドロップします。

function ignoreDrag(e) {
  e.originalEvent.stopPropagation();
  e.originalEvent.preventDefault();
}

$('#target')
    .bind('dragenter', ignoreDrag)
    .bind('dragover', ignoreDrag);
    .bind('drop', drop);

function drop(e) {
  ignoreDrag(e);
  var dt = e.originalEvent.dataTransfer;
  var files = dt.files;

  if(dt.files.length > 0){
    var file = dt.files[0];
    alert(file.name);
  }
}

プラグイン (未テスト) および質問へのその他の関連リンク

于 2012-09-07T21:32:48.653 に答える
2

私はそれのためにPuploadを使用しています。このドラッグ アンド ドロップの動作を実装する方法について心配する必要はありません。ブラウザーが html 5 と互換性がない場合は、適切に機能が低下します。

于 2012-09-08T00:35:09.533 に答える