Does HTML5 allow you to interact with local client files from within a web browser?



No, HTML5 does not allow you to interact with local client files directly. You can use drag and drop or FileSystem API for this.

Example

Let us see an example of drag and drop on a web browser using HTML5 −

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #boxA, #boxB {float:left;padding:10px;margin:10px; -moz-user-select:none;}
         #boxA { background-color: #6633FF; width:75px; height:75px; }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script>
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         <div id = "boxA" draggable = "true"
         ondragstart = "return dragStart(ev)">
         <p>Drag Me</p>
         </div>
         <div id = "boxB">Dustbin</div>
      </center>
   </body>
</html>

Advertisements