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	<!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>