input type="file"檔案上傳到後臺讀取
阿新 • • 發佈:2019-01-07
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();//新建一個FileReaderreader.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> 個人資料 </li> <li class="list-group-item text-center"> <imgsrc="${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值就是圖片資訊了