---
title: HTML5でファイルをドラッグ＆ドロップして画像を表示するサンプル
tags: ["HTML5", "JavaScript"]
categories: ["Programming", "JavaScript", "HTML5", "File"]
date: 2014-04-10T17:31:57Z
updated: 2014-04-10T17:31:57Z
---

<style>
.thumb {
  height: 75px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

#drop_zone2 {
  border: 2px dashed #bbb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font: 20pt bold 'Vollkorn';
  color: #bbb;
}
</style>

<div id="drop_zone2">ここにファイルをドロップ</div>
<output id="list2"></output>

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

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

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list2').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  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_zone2');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect2, false);
</script>

<h3>CSS</h3>

<pre><code class="lang-css">
.thumb {
  height: 75px;
  border: 1px solid #000;
  margin: 10px 5px 0 0;
}

#drop_zone {
  border: 2px dashed #bbb;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  font: 20pt bold 'Vollkorn';
  color: #bbb;
}
</code></pre>

<h3>HTML</h3>

<pre><code class="lang-html">&lt;div id=&quot;drop_zone&quot;&gt;ここにファイルをドロップ&lt;/div&gt;
&lt;output id=&quot;list&quot;&gt;&lt;/output&gt;</code></pre>

<h3>JavaScript</h3>

<pre><code class="lang-javascript">
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

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

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['&ltimg class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/&gt'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  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);
</code></pre>

参考: http://www.html5rocks.com/ja/tutorials/file/dndfiles/