fileupload 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebSocket demo</title>
<style>
body {padding: 40px;}
#outputPanel {margin: 10px;padding:10px;background: #eee;border: 1px solid #000;min-height: 300px;}
</style>
<script src="../lib/jquery.js"></script>
<script src="../lib/jquery-ui.js"></script>
<link href="../css/jquery-ui.css" rel="stylesheet">
</head>
<body>
 <input id='file' type='file'/>
 <input id='send' type='button' value='send'/>

 <input id='text' type='text' value=''/>
 <input id='connect' type='button' value='connect'/>
 <input id='sendtext' type='button' value='sendText'/>
 <input id='disconnect' type='button' value='disconnect'/>
 <div id='disp'></div>
 <a id='downloadFile' style='display:none;'></a>
</body>
<script>
$(document).ready(function (){
	var console = {log : function(text) {$("#disp").append(text).append("</br>")}};
	var demo = {
			socket : null, 	// WebSocket连接对象
			host : '',		// WebSocket连接 url
			connect : function() { 	// 连接服务器
				window.WebSocket = window.WebSocket || window.MozWebSocket;
				if (!window.WebSocket) {	// 检测浏览器支持
					console.log('Error: WebSocket is not supported .');
					return;
				}
				this.socket = new WebSocket(this.host); // 创建连接并注册响应函数
				this.socket.onopen = function(){console.log("websocket is opened .");};
				this.socket.onmessage = function(message) {
					if(typeof message.data === 'string'){
						console.log(message.data);
					}else{
						//, {type:"application/msword"}
						var blob = new Blob([message.data]);
						$("#downloadFile")[0].download = "downloadFile";
						$("#downloadFile")[0].href =  URL.createObjectURL(blob);
						$("#downloadFile")[0].click();

					}
				};
				this.socket.onclose = function(){
					console.log("websocket is closed .");
					demo.socket = null; // 清理
				};
			},
			send : function(message) {	// 发送消息方法
				if (this.socket) {
					this.socket.send(message);
					return true;
				}
				console.log('please connect to the server first !!!');
				return false;
			}
		};
	demo.host=(window.location.protocol == 'http:') ? 'ws://' : 'wss://' ;
	demo.host += window.location.host + '/websocket/HelloWebSocketServlet';


	$("#connect").on('click',function (){
		if (!demo.socket) 	demo.connect();
		else console.log('websocket already exists .');
	});
	$("#disconnect").on('click',function (){
		if (demo.socket) demo.socket.close();
		else  console.log('websocket is not found .');
	});
	$("#sendtext").on('click',function (){
		var message = $("#text").val();
		if (!message) return;
		if (!demo.send(message)) return;
		$("#text").val("");
	});

	$("#send").on('click',function (){
		var f = $("#file")[0].files[0];
		var reader = new FileReader();
		reader.readAsArrayBuffer(f)
		//reader.readAsBinaryString(f);
		reader.onload = function(){
			//var fs = new FileSlicer(reader.result);
			//demo.send(f.name);
			//for(var i = 0; i < fs.slices; ++i) {
            //	demo.send(fs.getNextSlice()); // see below
        	//}
			var byteArray = new Uint8Array(reader.result);
			demo.send(byteArray.buffer);
			console.log( f.name + "[" + f.size + "byte]" + "アップロード完了");
		};
	});

	function FileSlicer(file) {
	    // randomly picked 1MB slices,
	    // I don't think this size is important for this experiment
	    this.sliceSize = 1024*1024;
	    this.slices = Math.ceil(file.byteLength / this.sliceSize);

	    this.currentSlice = 0;

	    this.getNextSlice = function() {
	        var start = this.currentSlice * this.sliceSize;
	        var end = Math.min((this.currentSlice+1) * this.sliceSize, file.byteLength);
	        ++this.currentSlice;

	        return file.slice(start, end);
	    }
	}
});
</script>
</html>

 

posted @ 2017-08-28 00:07  keyiei  阅读(160)  评论(0)    收藏  举报