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> 个人资料 </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"文件上传到后台读取的更多相关文章
- js 实现 input type="file" 文件上传示例代码
在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...
- [置顶] js 实现 <input type="file" /> 文件上传
在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...
- javascript input type=file 文件上传
在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...
- input type='file'文件上传自定义样式
使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...
- <input type="file">文件上传
<input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...
- input type="file"文件上传时得到文件的本地路劲
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...
- input type='file'限制上传文件类型
前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so easy啊,没什么嘛 ...
- input type file onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。
不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...
- input[type='file']获取上传文件路径案例
最近在项目时,需要获取用户的上传文件的路径,便写了一个demo: <body> <input type="file" name="" valu ...
随机推荐
- Codeforces 920E(补图BFS)
题意: n(n<=200000)个点的完全图删去了m(m<=200000)条边,求剩下图的连通分量. 分析: 将未访问过的点用一个链表串起来 仍旧进行BFS,每次BFS扩展一个点u的时候, ...
- Java的方法
以下内容引用自http://wiki.jikexueyuan.com/project/java/methods.html: 一个Java方法是为了执行某个操作的一些语句的组合.举个例子来说,当调用Sy ...
- IOS开发 Block的学习
苹果公司正在大力推广Block块语法的使用,据说Block会迟早取代一般协议代理的使用. Block最大的作用是函数回调,简化代码. 在ios中,将blocks当成对象来处理,它封装了一段代码,这段代 ...
- C\C++中strcat()函数、sprintf函数
http://blog.csdn.net/smf0504/article/details/52055971 http://c.biancheng.net/cpp/html/295.html
- [RxJS] Use `lift` to Connect a `source` to a `subscriber` in RxJS
The lift method on each source hides away the internals of RxJS so you can simply connect a source t ...
- XxPay支付系统-boot版本 使用
https://segmentfault.com/a/1190000016987391?utm_source=tag-newest 有三个版本: spring boot 版本: spring clou ...
- React Native入门——布局实践:开发京东client首页(一)
有了一些对React Native开发的简单了解,让我们从实战出发.一起来构建一个简单的京东client. 这个client是仿照之前版本号的京东client开发的Android版应用,来源于CSDN ...
- 小胖说事35-----Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer posi
2011-06-11 15:19:17.167 ***[930:707] *** Terminating app due to uncaught exception 'CALayerInvalidGe ...
- 【HRS项目】Axure兴许问题解决---与SVN结合
上一篇博客介绍了Axure的团队开发用法,http://blog.csdn.net/u013036274/article/details/50999139,可是再用的时候发现会出现这种问题,例如以下图 ...
- MySQL 温故而知新--Innodb存储引擎中的锁
近期碰到非常多锁问题.所以攻克了后,细致再去阅读了关于锁的书籍,整理例如以下:1,锁的种类 Innodb存储引擎实现了例如以下2种标准的行级锁: ? 共享锁(S lock),同意事务读取一行数据. ? ...