Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html >
- <html>
- <head>
- <title></title>
- <script src="/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
- <script src="/Scripts/JXSockets-1.0.beta.js" type="text/javascript"></script>
- <script src="/Scripts/jXSocketsWorker.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function () {
- // add the dataTransfer property for use with the native `drop` event
- // to capture information about files dropped into the browser window
- jQuery.event.props.push("dataTransfer");
- // Create a regular WebSocket "instance", using the Generic WebSocketHandler
- var binaryWs = new jXSockets.xWebSocket("ws://127.0.0.1:4502/GenericBinary");
- binaryWs.bind("blob", function (blob) {
- console.log(blob);
- window.URL = window.URL || window.webkitURL;
- var img = document.createElement("img");
- img.height = 60;
- img.src = window.URL.createObjectURL(blob);
- img.onload = function (e) {
- window.URL.revokeObjectURL(this.src);
- }
- $("#images").append($(img));
- });
- binaryWs.bind("send", function (msg) {
- console.log("Sending..");
- console.log(msg);
- });
- $("#dropbox").bind("drop dragenter dragexit dragover", function (e) {
- e.stopPropagation();
- e.preventDefault();
- });
- $("#dropbox").bind("drop", function (e) {
- $(this).hide();
- e.stopPropagation();
- e.preventDefault();
- var files = e.dataTransfer.files;
- $(files).each(function () {
- binaryWs.send(this);
- });
- $(this).show();
- });
- });
- </script>
- </head>
- <style type="text/css">
- #dropbox
- {
- width: 200px;
- height: 200px;
- border: 2px solid #DDD;
- border-radius: 8px;
- background-color: #FEFFEC;
- text-align: center;
- }
- #images img
- {
- float: left;
- margin-right: 10px;
- }
- </style>
- <body>
- <h2>
- Drop an image here</h2>
- <div id="dropbox">
- </div>
- <div id="images">
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement