files-manual.html (2871B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>HTML5 Drag and Drop: files attribute returns a FileList</title> 5 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> 6 <link rel="author" title="Microsoft" href="http://www.microsoft.com/"/> 7 <link rel="help" href="http://dev.w3.org/html5/spec/dnd.html#datatransfer"/> 8 <meta name="assert" content="files attribute returns a FileList"/> 9 <script type="text/javascript"> 10 var EVENT, TARGET; 11 12 function DropEvent(evt) 13 { 14 if ((TARGET == evt.target) && (EVENT == evt.type)) 15 { 16 var files = evt.dataTransfer.files; 17 if(('[object FileList]' == files)) 18 { 19 document.getElementById("test_result").firstChild.data = "PASS"; 20 } 21 else 22 { 23 document.getElementById("test_result").firstChild.data = "FAIL"; 24 } 25 } 26 else 27 { 28 document.getElementById("test_result").firstChild.data = "FAIL"; 29 } 30 } 31 32 function DragenterEvent(evt) 33 { 34 evt.preventDefault(); 35 } 36 37 function DragoverEvent(evt) 38 { 39 evt.preventDefault(); 40 } 41 42 EVENT = "drop"; 43 44 window.onload = function() 45 { 46 TARGET = document.getElementById("target"); 47 TARGET.addEventListener(EVENT, DropEvent, false); 48 TARGET.addEventListener("dragenter", DragenterEvent, false); 49 TARGET.addEventListener("dragover", DragoverEvent, false); 50 } 51 </script> 52 </head> 53 <body> 54 <pre>Description: files attribute returns a FileList</pre> 55 <table id='testtable' border='1'> 56 <tr> 57 <td>Test Result</td> 58 <td>Test Assertion</td> 59 </tr> 60 <tr> 61 <td id='test_result'>Manual</td> 62 <td id='test_assertion'>Test passes if if the word "PASS" appears to the left after following the steps below. 63 <div id="manualsteps"> 64 Steps: 65 <ol> 66 <li> Drag a file and drop it in the green box 67 </ol> 68 </div> 69 </td> 70 </tr> 71 </table> 72 <p> 73 http://dev.w3.org/html5/spec/dnd.html#datatransfer 74 </p> 75 <p> 76 The files attribute must return a live FileList sequence consisting of File objects representing the files. 77 </p> 78 <textarea type="text" id="target" style="border:2px green solid; width:200px; height:50px"></textarea> 79 </body> 80 </html>