• 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; }
  • 相关阅读:
    前端JavaScript之DOM节点操作
    前端JavaScript之DOM事件操作
    前端JavaScript之ECMA
    前端css小米导航栏设置及盒子定位居中问题
    Go:条件语句、循环语句
    Go:值类型、引用类型
    Go:字符串操作
    Go:变量、常量、枚举
    type、object、class之间的关系
    二叉树
  • 原文地址:https://www.cnblogs.com/dullbaby/p/9409158.html
Copyright © 2020-2023  润新知