dnd/files/drop-files-2.html

<!DOCTYPE HTML>
<title>drop files</title>
<style>
#drop {
  border: blue 1px solid;
  height: 5em;
}
</style>

<p id=drop>Drop files here

<dl></dl>

<script>
  var results = document.getElementsByTagName ('dl')[0];
  var droparea = document.getElementById ('drop');
  droparea.ondragenter = function () { return false };
  droparea.ondragover = function () { return false };
  droparea.ondrop = function (ev) {
    var files = ev.dataTransfer.files;
    results.innerHTML = '';
    for (var i in files) {
      var dt = document.createElement ('dt');
      var code = document.createElement ('code');
      code.appendChild (document.createTextNode (i));
      dt.appendChild (code);
      results.appendChild (dt);

      var dd = document.createElement ('dd');
      var code = document.createElement ('code');
      code.appendChild (document.createTextNode (files[i]));
      dd.appendChild (code);
      results.appendChild (dd);

      var dd = document.createElement ('dd');
      results.appendChild (dd);
      var file = files[i];
      var img = document.createElement ('img');
      try { img.src = (window.URL || window.webkitURL).createObjectURL (file) } catch (e) { };
      dd.appendChild (img);
    }
    return false;
  };
</script>
1	wakaba	1.1	<!DOCTYPE HTML>
2			<title>drop files</title>
3			<style>
4			#drop {
5			border: blue 1px solid;
6			height: 5em;
7			}
8			</style>
9
10			<p id=drop>Drop files here
11
12			<dl></dl>
13
14			<script>
15			var results = document.getElementsByTagName ('dl')[0];
16			var droparea = document.getElementById ('drop');
17			droparea.ondragenter = function () { return false };
18			droparea.ondragover = function () { return false };
19			droparea.ondrop = function (ev) {
20			var files = ev.dataTransfer.files;
21			results.innerHTML = '';
22			for (var i in files) {
23			var dt = document.createElement ('dt');
24			var code = document.createElement ('code');
25			code.appendChild (document.createTextNode (i));
26			dt.appendChild (code);
27			results.appendChild (dt);
28
29			var dd = document.createElement ('dd');
30			var code = document.createElement ('code');
31			code.appendChild (document.createTextNode (files[i]));
32			dd.appendChild (code);
33			results.appendChild (dd);
34
35			var dd = document.createElement ('dd');
36			results.appendChild (dd);
37			var file = files[i];
38			var img = document.createElement ('img');
39			try { img.src = (window.URL \|\| window.webkitURL).createObjectURL (file) } catch (e) { };
40			dd.appendChild (img);
41			}
42			return false;
43			};
44			</script>