本文主要包含HTML5，断点续上传等相关知识,匿名希望在学习及工作中可以帮助到您
断点http:///php/php-tp-uploads.html" target="_blank">上传，java里面比较靠谱一点的，一般都会选用Flex。我承认，Flex只是摸了一下，不精通。HTML 5 有个Blob对象（File对象继承它），这个对象有个方法slice方法，可以对一个文件进行分片。，再加上HTML 5的File API和WebStorage。做了一个段断点续传的demo。
代码比较挫，把一个文件分成一个个小片之后，每一次上传都会将已经上传的字节数放到LocalStorage里面。关于LocalStorage里面缓存怎么清，可以参看Chrome - HTML 5 本地存储。如果上传的途中暂停或者直接关掉浏览器。下次上传的时候，就会从那个节点开始上传。
PS：demo操作，请先建立WS连接之后，再选择文件上传
代码请笑纳：
<!DOCTYPE html>
<html>
<head>
<title>使用WebSocket实现断点续传文件</title>
<meta charset="utf-8">
</head>
<script type="text/javascript" src="demo.js"></script>
<body onload="init();">
<button onclick="webSocketConn();">创建连接</button>(step1)
<div class="row">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>(step2)
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<button onclick="sendFileName();uploadFile()">上传</button>(step3)
<button onclick="pauseUpload()">暂停</button>
<label id="progressNumber"></label>
</div>
<div id="msg" style="max-height: 400px; overflow:auto;min-height: 100px;">
</div>
</body>
</html>####### 断点续传 ######
author：linrb
createTime: 2012-08-22
QQ: 569830404
*/
var websocket = null; //websocket
var msg = null; //日志
var paragraph = 10240; //每次分片传输文件的大小 10KB
var blob = null;// 分片数据的载体Blob对象
var file = null; //传输的文件
var startSize,endSize = 0; //分片的始终字节点
var uploadState = 0; // 0: 无上传/取消， 1： 上传中， 2： 暂停
//初始化消息框
function init(){
msg = document.getElementById("msg");
}
/**
* 分片上传文件
*/
function uploadFile() {
if(file){
//将上传状态设置成1
uploadState = 1;
endSize = getLastestUploadEndSize(file);
var reader = new FileReader();
reader.onload = function loaded(evt) {
var ArrayBuffer = evt.target.result;
websocket.send(ArrayBuffer);
uploadProgress(endSize);
};
if(endSize < file.size){
//先发送文件名称
//websocket.send(file.name);
//处理文件发送（字节）
startSize = endSize;
if(paragraph > (file.size - endSize)){
endSize = file.size;
}else{
endSize += paragraph ;
}
if (file.webkitSlice) {
//webkit浏览器
blob = file.webkitSlice(startSize, endSize);
}else
blob = file.slice(startSize, endSize);
reader.readAsArrayBuffer(blob);
}
}
}
//显示处理进程
function uploadProgress(uploadLen) {
var percentComplete = Math.round(uploadLen * 100 / file.size);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
//保存到LocalStorage一边下次传输，可以记忆起这个断点
localStorage.setItem(file.lastModifiedDate + "_" + file.name, uploadLen);
}
//WebSocket连接
function webSocketConn(){
try{
var readyState = new Array("正在连接", "已建立连接", "正在关闭连接"
, "已关闭连接");
var host = "ws://localhost:8000";
websocket = new WebSocket(host);
websocket.onopen = function(){
msg.innerHTML += "<p>Socket状态： " + readyState[websocket.readyState] + "</p>";
};
websocket.onmessage = function(event){
//每上传一个分片之后，等待介绍了服务端的提示之后再做下一个分片上传
if(event.data.indexOf("ok") != -1 && uploadState == 1){
if(endSize == file.size){
localStorage.removeItem(file.lastModifiedDate + "_" + file.name);
msg.innerHTML += "<p>上传完成!!</p>";
websocket.close();//结束上传
}else{
uploadFile();
}
}
};
websocket.onclose = function(){
msg.innerHTML += "<p>Socket状态： " + readyState[websocket.readyState] + "</p>";
};
msg.innerHTML += "<p>Socket状态： " + readyState[websocket.readyState] + "</p>";
}catch(exception){
msg.innerHTML += "<p>有错误发生</p>";
return;
}
}
/*
暂停上传
*/
function pauseUpload(){
uploadState = 2;
}
/**
* 从localStorage检查最后一次上传的字节
*/
function getLastestUploadEndSize(uploadFile){
var lastestLen = localStorage.getItem(uploadFile.lastModifiedDate + "_" + uploadFile.name);
if(lastestLen){
return parseInt(lastestLen);
}else{
return 0;
}
}
/*
发送文件名
*/
function sendFileName(){
websocket.send(file.name);
}
/**
* 选择文件之后触发事件
*/
function fileSelected() {
file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
}
}服务端：
package fileUpload;
import java.io.ByteArrayInputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;
import java.nio.ByteBuffer;
import java.nio.charset.Charset;
import java.security.MessageDigest;
public class UploadServer {
private int port = 8000;
private ServerSocket serverSocket;
public UploadServer() throws IOException {
serverSocket = new ServerSocket(port);
System.out.println("服务器启动");
}
private void service() {
Socket socket = null;
while (true) {
try {
socket = serverSocket.accept();
Thread workThread = new Thread(new Handler(socket));
workThread.start();
} catch (IOException e) {
e.printStackTrace();
}
}
}
class Handler implements Runnable {
private Socket socket;
private boolean hasHandshake = false;
Charset charset = Charset.forName("UTF-8");
private File file = null;
private FileOutputStream fileOut = null;
public Handler(Socket socket) {
this.socket = socket;