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 ...
随机推荐
- Beat---hdu2614
http://acm.hdu.edu.cn/showproblem.php?pid=2614 题目大意 题目就不粘了 就是一个简单的深搜 由于我深搜实在是不懂 就在写一个博客记录一下 #in ...
- Atom安装代码格式化插件atom-beautify
官网:https://github.com/Glavin001/atom-beautify 效果: 使用: [cmd]-[shift]-[p]或者[ctrl]-[shift]-[p]
- how to read openstack code: action extension
之前我们看过了core plugin, service plugin 还有resource extension. resource extension的作用是定义新的资源.而我们说过还有两种exten ...
- 关于maven的规则插件:Maven Enforcer plugin
Maven提供了Maven-Enforcer-Plugin插件,用来校验约定遵守情况(或者说校验开发环境).比如JDK的版本,Maven的版本,开发环境(Linux,Windows等),依赖jar包的 ...
- react-redux 之 provider 和 connect
1.Provider 提供的是一个顶层容器的作用,实现store的上下文传递 2.connect 可以把state和dispatch绑定到react组件,使得组件可以访问到redux的数据 react ...
- vux tabbar 组件
1.App.vue <!-- 入口文件 --> <template> <div id="app"> <!-- 视图层 --> < ...
- JSP中的编译指令和动作指令的差别
JSP中的编译指令和动作指令的差别 1.编译指令是通知Servlet引擎的处理消息.而动作指令仅仅是执行时的脚本动作 2.编译指令是在将JSP编译成Servlet时起作用,而动作指令可替换成JSP脚本 ...
- eclipse maven 插件的安装和配置
maven3 安装: 安装 Maven 之前要求先确定你的 JDK 已经安装配置完毕.Maven是 Apache 下的一个项目.眼下最新版本号是 3.0.4.我用的也是这个. 首先去官网下载 Mave ...
- excel 学习
最近越來越感覺到熟練運用office軟件是一門很深的學問,以前一直忽視了這個技能,因爲從來都不覺得這個有什麼技術難度.正是因爲這樣想,所以才一直沒能去好好研究使用這套工具.現在卻覺得有必要學習,在於: ...
- C和Fortran互相传递动态数组
C和Fortran的相互调用传递数值的方法有很多,但是F03标准的出笼,使用ISO_C_BINDING进行C和Fortran的互相调用有着更显著的优势: 1.与编译器和平台无关: 2.Fortran中 ...