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

Javascript Web Development Front End Scripts

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>

Anvi Jain

Published on 05-Apr-2018 13:10:11

Previous Page Print Page