在此项目中，用户注册时，需要上传头像，这里简单的利用了几个插件，实现了头像上传服务器的功能。前端利用了一个upload的插件，后端引用了Spring 的上传文件的jar包，下面整理贴出了项目中的相关代码：

JSP页面

需要引入js以及css文件：
bootstrap.css
ui.css
form.css
font-awesome.css

引入css

<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/ui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/form.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/skins/css/font-awesome.css">

引入js

jquery.js
form.js

<script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/jquery.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/skins/js/form.js"></script>

提示：所需的js、css文件以及必要的jar包我会在本文的下面贴出连接

HTML代码

<div class="form-group">
    <label class="col-sm-3 control-label">头像</label>
    <div class="col-sm-8">
        <div class="input-group" style="width: 60%" >
            <input type="text" class="form-control ue-form" name="avatar" id="filelist"  placeholder="选择上传头像">
            <span class="input-group-addon ue-form-btn " id="inputfiles">
            <i class="fa  fa-upload"></i></span>
        </div>
        <div class="progress" style="display:none;margin-top: 10px;width: 60%">
            <div class="progress-bar" id="inputpro">
                <span></span>
            </div>
        </div>
    </div>
</div>

效果图：

js代码

$(function() {
    var uploader = new plupload.Uploader({
        //用来指定上传方式,指定多个上传方式请使用逗号隔开,默认即为此,可不写
        runtimes: 'html5,flash,silverlight,html4',
        //点击上传html标签的id,可以是a,button等
        browse_button: 'inputfiles',
        //服务器端的页面上传地址
        url : context + '/service/uploadImg',
        //文件的最大上传大小,不写该参数则上传文件大小无限制
        max_file_size: '50mb',
        //设置多项选择,默认为true,即可多选文件,功能为单选时需将此设为false
        multi_selection: false,
        //上传的文件生成一个唯一的文件名,默认为false,false时上传文件为本身的名字,true时自动生成其他名字
        unique_names: true,
        //可以使用该参数来限制上传文件的类型,大小等,该参数以对象的形式传入
        filters: [
            {title: "Image files", extensions: "jpg,gif,png"},
            {title: "Zip files", extensions: "zip"}
        ],
        //flash地址,swf文件,当需要使用swf方式进行上传时需要配置该参数
        flash_swf_url: '../../dist/js/Moxie.swf',
        //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
        silverlight_xap_url: '../../dist/js/Moxie.xap',
        //当Plupload初始化完成后触发
        init: {
            //当文件添加到上传队列后触发(up为当前的plupload实例对象,files为一个数组,里面的元素为本次添加到上传队列里的文件对象)
            FilesAdded: function(up, files) {
                plupload.each(files, function(file) {
                    document.getElementById('filelist').value += file.name;
                });
                //开始上传队列中的文件
                uploader.start();
            },
            //会在文件上传过程中不断触发,可以用此事件来显示上传进度(up当前的plupload实例对象,file为触发此事件的文件对象)
            UploadProgress: function(up, file) {
                $("#inputpro").parent().show();
                $("#inputpro")[0].style.width = $("#inputpro")[0].innerText = file.percent + "%";
            },
            FileUploaded:function (up,file,responseObject) {
                //将json字符串转换成json对象
                console.log(responseObject);
               var data =  JSON.parse(responseObject.response);
               $("#filelist").val(data.fileName)

            }

        }
    });
//初始化Plupload实例
    uploader.init();
});

注意这个方法FileUploaded，这是一个服务器完成上传后返回的信息，在这里可以调用服务器返回的信息。

到这里前端的东西就写完了，下面贴一下后端的代码。

后端

配置jar包

这里需要用到两个jar包：
commons-fileupload-1.3.3.jar
commons-io-1.4.jar
我这里使用的idea写的项目，所以这两个jar包复制到lib目录下之后，需要把它引进库里。
打开项目结构-在library里将jar添加进去

配置xml文件添加bean

在spring-servlet.xml文件中添加bean，如下图所示：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="104857600"/>
    <property name="maxInMemorySize" value="4096"/>
</bean>

controller层

//上传用户头像
@RequestMapping("uploadImg")
@ResponseBody
public Map<String,String> uploadImg(HttpServletRequest request,HttpSession httpSession)throws IllegalStateException,IOException
{
    Map<String,String> map = new HashMap<String,String>();
    long  startTime=System.currentTimeMillis();
    String thisTime = String.valueOf(startTime);
    //获取当前路径
    String thisPath = request.getServletContext().getRealPath("uploadFile");
    System.out.println(thisPath);
    //将当前上下文初始化给  CommonsMutipartResolver （多部分解析器）
    CommonsMultipartResolver multipartResolver=new CommonsMultipartResolver(
            request.getSession().getServletContext());
    //检查form中是否有enctype="multipart/form-data"
    if(multipartResolver.isMultipart(request))
    {
        //将request变成多部分request
        MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
        //获取multiRequest 中所有的文件名
        Iterator iter=multiRequest.getFileNames();

        while(iter.hasNext())
        {
            //一次遍历所有文件
            MultipartFile file=multiRequest.getFile(iter.next().toString());
            if(file!=null)
            {
                String path=thisPath+"\\"+thisTime+file.getOriginalFilename();
                //上传
                file.transferTo(new File(path));
                String fileName =thisTime+file.getOriginalFilename();
                String fileUrl = "<%=request.getContextPath()%>/uploadFile/"+fileName;
                map.put("fileName",fileName);
                map.put("fileUrl",fileUrl);
            }
        }

    }
    return map;
}

这里只是做了个简单的上传，上传后得到一个路径还有文件名，然后返回给前端，等用户提交注册之后，将信息一起保存到数据库里。