使用Html5的WebSocket在浏览器上传文件,支持多文件和大文件.

件.

使⽤websocket上传⽂件的简单例⼦:

上篇⽂章没有解决的问题就是⼤⽂件的上传问题, ⽽且多⽂件上传问题也未协调. 所以这篇⽂章就是解决这两个问题的.

如果将⼀个⼤⽂件直接读⼊内存再发送的话, 内存会吃不消, 所以我们把⼤⽂件分块传输. Html5的Fileread⽅法提供了读取⽂件部分内容Blob的⽅法.

为了保证后台接收到的分块数据的顺序不会乱掉, 我们需要后台确定写⼊分块数据后再发送下⼀块数据. 在Html端:

Html5功能测试

0

style=\"width: 200px;\">

这⾥设置了⽂件⼤于paragraph (10M)时就会分块发送⽂件.

服务器端:

/**

* 处理字符串消息*/

public void onMessage( WebSocket conn, String message ) { System.out.println(\"⽂件名\" + message);

//将⽂件名写⼊连接对象中,(需要⼿动修改webSocket类) conn.setFileName(message);

try {

conn.send(\"ok\");

} catch (NotYetConnectedException e) { // TODO Auto-generated catch block e.printStackTrace();

} catch (IllegalArgumentException e) { // TODO Auto-generated catch block e.printStackTrace();

} catch (InterruptedException e) {

// TODO Auto-generated catch block e.printStackTrace(); } }

/**

* 处理⼆进制消息*/

public void onMessage(WebSocket conn, byte[] message) { System.out.println(\"收到⼆进制流:\");

//将⼆进制流保存为⽂件, ⽂件名从连接对象中取出

saveFileFromBytes(message, \"src/\" + conn.getFileName()); //告诉前台可以继续发送了. try {

conn.send(\"ok\");

} catch (NotYetConnectedException e) { // TODO Auto-generated catch block e.printStackTrace();

} catch (IllegalArgumentException e) { // TODO Auto-generated catch block e.printStackTrace();

} catch (InterruptedException e) {

// TODO Auto-generated catch block e.printStackTrace(); } }

/**

* 将⼆进制byte[]数组写⼊⽂件中 * @param b byte[]数组

* @param outputFile ⽂件位置 * @return 成功: true 失败: false */

public static boolean saveFileFromBytes(byte[] b, String outputFile) {

FileOutputStream fstream = null; File file = null; try {

file = new File(outputFile);

fstream = new FileOutputStream(file, true); fstream.write(b); }

catch (Exception e) {

e.printStackTrace(); return false; }

finally {

if (fstream != null) { try {

fstream.close(); }

catch (IOException e1) {

e1.printStackTrace(); } } }

return true; }

好了, 顺序发送保证了后台写⼊的数据也是顺序的, ⽂件就不会出错了! 搞定!