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

input type="file"文件上传到后台读取的更多相关文章

  1. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  2. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  3. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

  4. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  5. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  6. input type="file"文件上传时得到文件的本地路劲

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  7. input type='file'限制上传文件类型

    前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛 ...

  8. input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  9. input[type='file']获取上传文件路径案例

    最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...

随机推荐

  1. Effective Java Profiling With Open Source Tools

    https://www.infoq.com/articles/java-profiling-with-open-source

  2. sgu208:Toral Tickets(P&#243;lya定理)

    题意简述:给你N和M,对于一个N∗M的单面方格纸你能够对它的每 个个格子黑白染色.然后把方格纸的长边卷起来,卷成一个圆柱体,然后再把 两个短边形成的圆也接起来.形成一个游泳圈的形状(我们染的色仅仅在游 ...

  3. Android开发:怎样隐藏自己的app应用

    本文主要介绍怎样通过改动AndroidManifest.xml清单文件来达到隐藏自身应用的目的,不是隐藏第三方应用.为了不浪费大家时间.特此说明. 转载请注明作者xiong_it和链接:http:// ...

  4. SGU - 186 - The Chain (贪心)

    186. The Chain time limit per test: 0.25 sec. memory limit per test: 4096 KB input: standard input o ...

  5. 谈谈TensorFlow with CPU support or TensorFlow with GPU support(图文详解)

    不多说,直接上干货! You must choose one of the following types of TensorFlow to install: TensorFlow with CPU ...

  6. IOS 字典模型互转框架 MJExtension

    IOS 字典模型互转框架 MJExtension   能做什么? MJExtension是一套字典和模型之间互相转换的超轻量级框架 MJExtension能完成的功能 字典(JSON) -->  ...

  7. ZOJ 3691 Flower(最大流+二分)

    Flower Time Limit: 8 Seconds      Memory Limit: 65536 KB      Special Judge Gao and his girlfriend's ...

  8. 检查 统计 异常 通信 time_wait

    [root@hadoop1 conf]# netstat -n | grep -v 127.0.0.1 | grep -v :3306  | grep TIME_WAIT | sort -k 5n | ...

  9. 递归读取制定目录下所有文件夹和文件的实现(java)

    public static String getAllDirectorisAndFiles(String path){ Map<String, Object> responseMap = ...

  10. C语言中string char int类型转换

    C语言中string -- ::) 转载 ▼ 标签: 操作符 int char c语言 类型转换 分类: C/Cpp ,char型数字转换为int型 "; printf(]-');//输出结 ...