Advertisement
Guest User

Untitled

a guest
Mar 21st, 2018
60
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 1.42 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>test file drag and drop</title>
  5.     <meta charset="utf-8">
  6. </head>
  7. <body>
  8.     <div id='fileDrop'></div>
  9. </body>
  10. <script type="text/javascript" src="./jQuery.js"></script>
  11. <style type="text/css">
  12.     #fileDrop {
  13.         padding: 40px;
  14.         border-color: rgba(0,0,255,1);
  15.         border-style: solid;
  16.     }
  17. </style>
  18. <script type="text/javascript">
  19.     $( document ).ready(function() {
  20.         // Empêche le navigateur de lire l'image
  21.         $(document).on("dragover", false);
  22.  
  23.         // Empêche le navigateur de lire l'image
  24.         $(document).on("dragleave", false);
  25.  
  26.         // Empêche le navigateur de lire l'image
  27.         $(document).on('drop',false);
  28.  
  29.          // Empêche le navigateur de lire l'image
  30.         // Moment parfait pour changer le style de this
  31.         $("#fileDrop").on("dragover", function(event) {
  32.             event.preventDefault();  
  33.             event.stopPropagation();
  34.         });
  35.  
  36.          // Empêche le navigateur de lire l'image
  37.         // Moment parfait pour changer le style de this
  38.         $("#fileDrop").on("dragleave", function(event) {
  39.             event.preventDefault();  
  40.             event.stopPropagation();
  41.         });
  42.  
  43.          // Autorise la lecture de l'image (type file en js)
  44.         // Devinez quel navigateur risque de faire chier ???
  45.         /**
  46.  
  47.         */
  48.         $('#fileDrop').on('drop',function(event){
  49.             event.preventDefault();  
  50.             event.stopPropagation();
  51.             console.log(event.originalEvent.dataTransfer.files);
  52.         })
  53.     });
  54. </script>
  55. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement