一、简单介绍

1、 项目名：MyChat（Maven工程项目）
2、开发环境：Win10
3、开发工具：Eclipse + Tomcat + Chrome
4、使用技术：HTML + CSS + JS + JSP + JAVA + Servlet
5、第三方包：json-lib

<groupId>net.sf.json-lib</groupId>
   <artifactId>json-lib</artifactId>
   <version>2.4</version>
   <classifier>jdk15</classifier>
</dependency>

6、源码下载链接：https://pan.baidu.com/s/1F6sO_HScwcUJT9JRaaLfAQ

二、页面展示

1、 登录页面

主要功能：输入昵称进入聊天室。昵称检测，要求不为空；不能与已登录的用户重复。如果为空或重复则在输入框中显示提示信息，不能用提示信息作为昵称，确定昵称后提示是否以此昵称进入。

2、 聊天室页面


主要功能：用户退出按钮、当前时间显示、用户列表显示、聊天信息显示、发送消息、文件上传（所有文件类型、图片支持预览）、文件列表显示、文件下载，其他功能可以到源码中查看。

3、点击文件列表中的下载按钮可以查看和下载文件

三、AJAX简单封装

在处理页面请求时，多处用到了ajax请求，因此在这里做一下简单封装，大家也可以根据自己需求封装出合适的好用的ajax请求。

/** 获得ajax对象 */
function getXhr() {
    var xhr;
    if (window.XMLHttpRequest) {
        // 非IE浏览器
        xhr = new XMLHttpRequest();
    } else {
        // IE浏览器
        xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
}
/**
 * ajax请求，用来传输文本字符串
 * @param method 请求方式：get、post
 * @param url 请求路径
 * @param param 请求参数
 * @param resultType 返回结果类型：text、json
 * @param success 成功回调函数：function(result) {}
 * @param error 错误回调函数：function() {}
 */
function _ajax(method, url, param, resultType, success, error) {
    // 获取ajax对象
    var xhr = getXhr();
    // 打开连接，发送数据
    if (method == "get") {
        xhr.open("get", url+"?"+param, true);
        xhr.send(null);
    } else if (method == "post") {
        xhr.open("post", url, true);
        // 请求头，传输字符串
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(param);
    } 
    // 回调函数
    success = success || function() {};
    error = error || function() {};
    // 绑定事件
    xhr.onreadystatechange = function () {
        // 返回数据
        var resultData;
        if (xhr.readyState == 4 && xhr.status == 200) {
            var text = xhr.responseText;
            if (resultType == "text") {
                resultData = text;
            } else if (resultType == "json") {
                resultData = JSON.parse(text);
            }
            //console.log(resultData);
            if (resultData) {
                success(resultData);
            } else {
                error();
            }
        }
    };
}
/**
 * ajax请求，用来上传文件
 * @param method 请求方式：post
 * @param url 请求路径
 * @param param 请求参数：表单数据formData
 * @param resultType 返回结果类型：text、json
 * @param success 成功回调函数：function(result) {}
 * @param error 错误回调函数：function() {}
 */
function _ajaxF(method, url, param, resultType, success, error) {
    // 获取ajax对象
    var xhr = getXhr();
    // 打开连接，发送数据
    xhr.open("post", url, true);
    xhr.send(param);
    // 回调函数
    success = success || function() {};
    error = error || function() {};
    // 绑定事件
    xhr.onreadystatechange = function () {
        // 返回数据
        var resultData;
        if (xhr.readyState == 4 && xhr.status == 200) {
            var text = xhr.responseText;
            if (resultType == "text") {
                resultData = text;
            } else if (resultType == "json") {
                resultData = JSON.parse(text);
            }
            //console.log(resultData);
            if (resultData) {
                success(resultData);
            } else {
                error();
            }
        }
    };
}

这里需要区别一下参数的写法：
传输字符串："paramName"=paramValue&"paramName1"=paramValue1...，
上传文件：参数为form表单对象，具体操作详见四、文件上传并保存到Tomcat服务器。
使用方法按要求传入参数即可。

四、文件上传并保存到Tomcat服务器

1、配置form表单，必须添加属性enctype="multipart/form-data"，如果不添加默认为enctype="application/x-www-form-urlencoded"只能发送字符串，与上面封装的第一个ajax请求设置的请求头是一样的。action和method属性中的值可以不写，因为是用ajax发请求提交，如果是用表单直接提交则要写。需要提交的数据都要写name属性，为了能在服务器端进行区分除了文件数据外还有其他数据。我这里随文件提交的还有昵称，这个只是为了满足这里的需求，需要根据实际情况来定。

<!-- enctype="enctype="multipart/form-data"  -->
<form id="uploadFileForm" action="uploadFile.file" method="post" enctype="multipart/form-data">
    <!-- name="file"，文件框必须写name属性 -->
    选择文件：<input id="file" name="file" type="file"/>
    <input id="user_name" name="${nickName }" type="text" value="${nickName }"/>
    <input id="send_file" type="button" value="发送文件"/>
</form>

2、获取form表单对象

var formData = new FormData(_id("uploadFileForm"));

3、发送请求

_ajaxF("post", "uploadFile.file", formData, "json",
    function(result) {
        //console.log(result);
        if(result.msg == "文件上传成功") {
            uploadFileEnd(id);
            confirm(result.msg);
        } else {
            uploadFileEnd(id);
            alert(result.msg);
        }
    },
    function() {
        alert("文件上传失败！");
    }
);

4、获取项目在服务器中的绝对路径

String realPath = getServletContext().getRealPath("/");

本人笔记本上获取的路径：D:\SoftwareInstallation\Tomcat8.0\wtpwebapps\MyChat\

5、处理上传的文件，这里贴出整个方法，看起来更完整，也有注释

    /**
     * 上传文件
     * @param req
     * @param res
     * @throws IOException 
     */
    private void uploadFile(HttpServletRequest req, HttpServletResponse res) throws IOException {
        FileOperationUtil.createSaveUploadFiles(realPath);
        // 获输出取流
        PrintWriter pw = res.getWriter();
        // 创建流
        BufferedInputStream bis = null;
        BufferedOutputStream bos = null;
        // 文件原名
        String fileName = "";
        // 文件保存之后的名字
        String fileSaveName = "";
        // 文件保存路径
        String savePath = "";
        // 昵称
        String nickName = "";
        // 返回消息
        String msg = "";
        try {
            if (ServletFileUpload.isMultipartContent(req)) {
                // 转换为文件上传请求
                ServletRequestContext src  = new ServletRequestContext(req);
                // 文件列表
                List<FileItem> fileItems = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(src);
                for (FileItem file : fileItems) {
                    //System.out.println("FileItems:" + file);
                    // 从打印的信息中可以看出如果是文件，isFormField值为false
                    if (!file.isFormField()) {
                        //System.out.println("file:" + file);
                        fileName = file.getName();
                        // 文件扩展名
                        String fileType = fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
                        fileSaveName = System.currentTimeMillis() + fileType;
                        savePath = realPath + FileOperationUtil.SAVE_UPLOAD_FILE + fileSaveName;
                        // 获取文件输入流
                        InputStream is = file.getInputStream();
                        bis = new BufferedInputStream(is);
                        // 创建文件输出流保存文件
                        FileOutputStream fos = new FileOutputStream(savePath);
                        bos = new BufferedOutputStream(fos);
                        // 字节数组
                        byte[] buf = new byte[1024 * 10];
                        int n = bis.read(buf);
                        while(n != -1) {
                            bos.write(buf, 0, n);
                            n = bis.read(buf);
                        }
                    } else {
                        nickName = file.getFieldName();
                    }
                }
                // 保存上传信息
                UploadFile uFile = new UploadFile(nickName, fileName, fileSaveName, savePath, DateFormatUtil.timeFormat());
                uFiles.add(uFile);
                // 返回信息
                msg = "{msg:'文件上传成功'}";
                pw.println(JSONObject.fromObject(msg).toString());
                FileOperationUtil.saveUploadFile(realPath, uFiles);
            }
        } catch (FileUploadException e) {
            msg = "{msg:'文件上传失败'}";
            pw.println(JSONObject.fromObject(msg).toString());
        } finally {
            pw.close();
            if (bis != null) {
                bis.close();
            }
            if (bos != null) {
                bos.close();
            }
        }

    }

五、小结

以上代码是从案例中截取出来的，如果单看不好理解，可以下载源码结合源码一起看比较好。需要进一步了解的，想要玩一下的也可以下载源码。这个小案例中有些细节的地方没有处理好，欢迎大家一起交流。