Advertisement
dathor

XSockets.NET Binary mesages + FileAPI

Jan 30th, 2012
182
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 2.42 KB | None | 0 0
  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
  6.     <script src="/Scripts/JXSockets-1.0.beta.js" type="text/javascript"></script>
  7.     <script src="/Scripts/jXSocketsWorker.js" type="text/javascript"></script>
  8.     <script type="text/javascript">
  9.  
  10.  
  11.         $(function () {
  12.  
  13.             // add the dataTransfer property for use with the native `drop` event
  14.             // to capture information about files dropped into the browser window
  15.             jQuery.event.props.push("dataTransfer");
  16.  
  17.             // Create a regular WebSocket "instance", using the Generic WebSocketHandler
  18.             var binaryWs = new jXSockets.xWebSocket("ws://127.0.0.1:4502/GenericBinary");
  19.  
  20.             binaryWs.bind("blob", function (blob) {
  21.                 console.log(blob);
  22.                 window.URL = window.URL || window.webkitURL;
  23.                 var img = document.createElement("img");
  24.                 img.height = 60;
  25.                 img.src = window.URL.createObjectURL(blob);
  26.                 img.onload = function (e) {
  27.                     window.URL.revokeObjectURL(this.src);
  28.                 }
  29.                 $("#images").append($(img));
  30.             });
  31.  
  32.  
  33.  
  34.  
  35.  
  36.             binaryWs.bind("send", function (msg) {
  37.                 console.log("Sending..");
  38.                 console.log(msg);
  39.             });
  40.             $("#dropbox").bind("drop dragenter dragexit dragover", function (e) {
  41.                 e.stopPropagation();
  42.                 e.preventDefault();
  43.             });
  44.             $("#dropbox").bind("drop", function (e) {
  45.                 $(this).hide();
  46.                 e.stopPropagation();
  47.                 e.preventDefault();
  48.                 var files = e.dataTransfer.files;
  49.                 $(files).each(function () {
  50.                     binaryWs.send(this);
  51.                 });
  52.                 $(this).show();
  53.             });
  54.         });
  55.  
  56.  
  57.  
  58.     </script>
  59. </head>
  60. <style type="text/css">
  61.     #dropbox
  62.     {
  63.         width: 200px;
  64.         height: 200px;
  65.         border: 2px solid #DDD;
  66.         border-radius: 8px;
  67.         background-color: #FEFFEC;
  68.         text-align: center;
  69.     }
  70.    
  71.     #images img
  72.     {
  73.         float: left;
  74.         margin-right: 10px;
  75.     }
  76. </style>
  77. <body>
  78.     <h2>
  79.         Drop an image here</h2>
  80.     <div id="dropbox">
  81.     </div>
  82.     <div id="images">
  83.     </div>
  84. </body>
  85. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement