dnd/files/drop-files-1.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');
      var fdl = document.createElement ('dl');
      dd.appendChild (fdl);
      results.appendChild (dd);
      var file = files[i];
      for (var j in file) {
        var fdt = document.createElement ('dt');
        var code = document.createElement ('code');
        code.appendChild (document.createTextNode (j));
        fdt.appendChild (code);
        fdl.appendChild (fdt);

        var fdd = document.createElement ('dd');
        var code = document.createElement ('code');
        code.appendChild (document.createTextNode(file[j]));
        fdd.appendChild (code);
        fdl.appendChild (fdd);
      }
    }
  };
</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			var fdl = document.createElement ('dl');
37			dd.appendChild (fdl);
38			results.appendChild (dd);
39			var file = files[i];
40			for (var j in file) {
41			var fdt = document.createElement ('dt');
42			var code = document.createElement ('code');
43			code.appendChild (document.createTextNode (j));
44			fdt.appendChild (code);
45			fdl.appendChild (fdt);
46
47			var fdd = document.createElement ('dd');
48			var code = document.createElement ('code');
49			code.appendChild (document.createTextNode(file[j]));
50			fdd.appendChild (code);
51			fdl.appendChild (fdd);
52			}
53			}
54			};
55			</script>