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