html頁面（表單採用bootStrap）

js部分:

//更換頭像時把上傳的圖片post方式到控制器
<script type="text/javascript">
function upload() {
        var files = $('input[name="fileField"]').prop('files');//獲取到檔案列表
if (files.length == 0) {
            alert('請選擇檔案');
return;
} else {
            var reader = new FileReader();//新建一個FileReader
 
reader.readAsText(files[0], "UTF-8");//讀取檔案
reader.onload = function (evt) { //讀取完檔案之後會回來這裡
var fileString = evt.target.result;
//post方式上傳圖片到控制器
var date = {"file": fileString};
$.post("editProfile", date).success(function (result) {
                    alert("ok");
});
}
        }
    }
</script>

表單部分

<div class="col-xs-12 col-sm-4 text-center">
    <ul class="list-group">
        <li class="list-group-item text-left">
            <span class="entypo-user"></span>&nbsp;&nbsp;個人資料
        </li>
        <li class="list-group-item text-center">
            <img 
 
src="${user.avatar}" alt=""<!-- ${user.avatar}為頭像url地址 -->
class="img-circle img-responsive img-profile">
        </li>
        <li class="list-group-item text-right" style="text-align: center">
            <div id="drag-and-drop-zone" class="uploader">
                <form action="" method="post" enctype="multipart/form-data">
                        <span class="btn btn-success btn-file"> 更換頭像
 <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
          <input type="file" name="fileField" class="file" id="fileField" size="28"
onchange="upload()"/>
                </span>
                </form>
            </div>
        </li>
    </ul>
</div>

控制器部分:

@RequestMapping("editProfile")
public ModelAndView editProfile(HttpServletRequest request,@CurrentUser User usaer){
    String file=request.getParameter("file");
ModelAndView mv=new ModelAndView();
    return mv;
}

此處String的file值就是圖片資訊了