123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- <html>
- <head>
- <script src="/socket.io/socket.io.js"></script>
- </head>
- <body>
-
- <div id="drop_zone">Drop files here</div>
- <button onclick="sendFile()">SEND FILE</button>
- <output id="list"></output>
- <script>
- function readBlob(opt_startByte, opt_stopByte) {
- if (!window.selectedFile) {
- alert('Please select a file!');
- return;
- }
- var file = window.selectedFile;
- var start = parseInt(opt_startByte) || 0;
- var stop = parseInt(opt_stopByte) || file.size - 1;
- var reader = new FileReader();
- // If we use onloadend, we need to check the readyState.
- reader.onloadend = function(evt) {
- if (evt.target.readyState == FileReader.DONE) { // DONE == 2
- var data = evt.target.result;
- sendToSocket(file.name, data, start, stop);
- }
- };
- var blob = file.slice(start, stop + 1);
- reader.readAsBinaryString(blob);
- }
- function handleFileSelect(evt) {
- evt.stopPropagation();
- evt.preventDefault();
- var files = evt.dataTransfer.files; // FileList object.
- // files is a FileList of File objects. List some properties.
- var output = [];
- for (var i = 0, f; f = files[i]; i++) {
- output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
- f.size, ' bytes, last modified: ',
- f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
- '</li>');
- window.selectedFile = f;
- }
- document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
- }
- function handleDragOver(evt) {
- evt.stopPropagation();
- evt.preventDefault();
- evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
- }
- // Setup the dnd listeners.
- var dropZone = document.getElementById('drop_zone');
- dropZone.addEventListener('dragover', handleDragOver, false);
- dropZone.addEventListener('drop', handleFileSelect, false);
- </script>
- <script>
- var socket = io.connect();
- socket.on('connect', function () {
- console.log("Connected");
- });
- function sendFile(){
- console.log("Sending File");
- if(!window.selectedFile){
- alert("Select a file");
- return;
- }
- socket.emit("wannafile", { name : window.selectedFile.name, size : window.selectedFile.size });
- socket.on(window.selectedFile.name, function(data){
- if(data.position > data.total){
- console.log("Error:");
- console.log(data);
- alert("error");
- return;
- }
- if(data.position === data.total){
- alert("Completed!");
- return;
- }
- console.log("Server ask me for daata");
- console.log(data);
- var start = data.position;
- var end = ( data.total > start + 1000000 ) ? start + 1000000 : data.total;
- readBlob(start,end);
- });
- }
- function sendToSocket(name, data, start, end){
- socket.emit("upload", { name : name, data : data, startPosition : start, endPosition : end} );
- }
- // Check for the various File API support.
- if (window.File && window.FileReader && window.FileList && window.Blob) {
- // Great success! All the File APIs are supported.
- } else {
- alert('The File APIs are not fully supported in this browser.');
- }
- </script>
- </body>
- </html>
|