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. HDU 2050 【dp】【简单数学】

    题意: 中文. 思路: 不难发现数学规律是这样的,每次增加的划分区域的数量是每次增加的交点的数量再加一.然后就总结出了递推公式. #include<stdio.h> ]; int main ...

  2. http://vdceye.com/ 全新页面上线

    vdceye manager home page

  3. python菜鸟日记1

    1. 在__init__(self,...)初始化函数中.定义对象的属性,这些属性不用所有写在括号里,括号里的表示定义的时候须要赋初始值的一些属性,而其它不用初始值的属性.能够 直接卸载代码块中,se ...

  4. java notify notifyAll

    notify()和notifyAll()都是Object对象用于通知处在等待该对象的线程的方法. void notify(): 唤醒一个正在等待该对象的线程.void notifyAll(): 唤醒所 ...

  5. Java经常使用日期操作具体解释

    Date类型大多数时间分量计算方法已经被Calendar代替 Date经常用法setTime getTime() new Date();默认获取当前的时间 SimpleDateFormat用来格式化和 ...

  6. 2012年公司组织旅游西安线个人记录(repost)

    2012年公司组织旅游西安线个人记录 文件夹 [隐藏]  1 序言 2 第1天 3 第2天 4 第3天 5 第4天 6 第5天 [title=2012%E5%B9%B4%E5%85%AC%E5%8F% ...

  7. cocos2d-x中锚点设置及定位方式

    问题 在cocos2d演示样例代码HelloCpp中,为什么要将CCMenu设置位置到CCPointZero,即使CCMenu的锚点是在(0.5, 0.5)? 回答 这是由于CCMenu没有使用锚点进 ...

  8. java Http post请求发送json字符串

    最近差点被业务逻辑搞懵逼,果然要先花时间思考,确定好流程再执行.目前最好用的jar包还是org.apache.http. public class HttpClientHelper { private ...

  9. 在myeclipse中拷贝一个工程,修改部署的名字

        在MyEclipse中,经常练习的时候需要建立多个工程,但是为了方便,通常的作法是:复制一个工程,然后直接粘贴,但是,部署以后会发现,使用新的工程名访问不了,报404错误. 其原因是没有修改W ...

  10. mysql04--存储过程

    过程:若干语句,调用时执行封装的体.没有返回值的函数. 函数:是一个有返回值的过程 存储过程:把若干条sql封装起来,起个名字(过程),并存储在数据库中. 也有不存储的过程,匿名过程,用完就扔(mys ...