input type="file"文件上傳到后台讀取


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; }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM