jquery.form.js框架实现文件上传功能案例解析(springmvc)

上一篇引导程序自定义文件上传下载样式(//www .JB 51。net/article/85156。htm)已经有一段时间了，一直在考虑怎么样给大家提交一篇完美的逻辑处理功能。现在我结合自己的实际工作给大家分享一下。使用的技术有jquery.form.js框架，以及学习笔记一框架。主要实现异步文件上传的同时封装对象，以及一些注意事项。功能本身是很简单的，但是涉及到一些传递参数类型的问题。例如：jquery的创建交互式、快速动态网页应用的网页开发技术方法与jquery.form.js中的ajaxSubmit方法的参数，具体细节将在下一篇博客中分享。重点：html表格三要素：操作='文件上传/文件上传'方法=“post”enctype=“multipart/form-data”；1.最简单的表单直接提交超文本标记语言代码：

正文表单操作='文件上传/文件上传'方法=' post ' enctype=' multipart/form-data '输入类型='text '名称='password '输入类型=“文件”名称=“文件”输入类型='text '名称='username '输入类型='提交'值='提交'/表单按钮id='button '提交/button/bodyjava代码

@ Controller @请求映射(“/文件上传”)公共类文件上载{ @请求映射('/文件上载')@响应正文公共字符串文件上传1(@ request param(' file ')多部分文件文件/*，@RequestParam('用户名')字符串用户名*/){系统。出去。println('-file。getsize())；if(！文件。isempty()){ system。出去。println(' Process file : '文件。getoriginalfilename())；请尝试{ fileutils。复制输入流文件(文件。getinputstream()，新文件(' c : \ \ temp \ \ imoc \ \ '，系统。currentitmemillis()。文件。getoriginalfilename()))；} catch(IOexception e){ e . print stack trace()；} }返回”新建文件”；}}具体的学习笔记一配置，包括文件上传的配置如下准备工作：需要把雅加达公共文件上传及雅加达下议院的包放解放运动里。这边的包是：commons-文件上传-1。1 .1 .jar commons-io-1。3 .2 .冲突然后在spring-servlet.xml进行多部分解析器配置，不配置好上传会不好用。

bean id=“多部分解析器”类=' org。弹簧框架。网络。多点通信。' CommonsMultiperSolver '属性名=' MaxUploadSize '值100000/值/属性属性名=' Defaultencoding '值utf-8/值/属性/bean接下来就是页面了：注意形式的写法和文件上传组件的写法。

表单操作='uploadPosdetailFile.html '方法=' post ' ENCTYPE=' multipart/form-data ' div class=' form ' p span class=' req ' input id=' startDateTxt ' name=' startDateTxt '字段大小4 ' title='输入日期/span标签开始日期： span(日期格式：毫米/日/年，如336001/01/2014)/跨度/标签/p跨度等级='再在控制器里写处理代码，注意参数和页面控件的对应关系：

@请求映射(值='/uploadPosdetailFile ')公共字符串uploadPosdetailFile(@ request param(' startDateTxt ')字符串startDateTxt，@RequestParam('endDateTxt ')字符串endDateTxt，@ request param(' uploadfiletctrl ')多部分文件，HttpServletRequest请求，httperservise响应){尝试{系统。出去。println(' @ @ @ @ 1。startDateTxt=' startDateTxt '；系统。出去。println(' @ @ @ @ @ @ 2。endDateTxt=' endDateTxt ')；系统。出去。println(' @ @ @ @ @ 3。文件=' file。getoriginalfilename())；//得到上传文件的文件名if(文件。isempty()==false){ InputStream is=file。getinputstream()；InputStreamReader ISR=new InputStreamReader(is)；BufferedReader br=新的缓冲恐惧者；字符串s；while((s=br.readLine())！=null){ system。出去。println} br。close()；ISR。close()；就是。close()；}返回"/pages/posdetail/uploadposdetailresult/index。JSP”；} catch(异常e){ e . print stack trace()；伐木工。错误(e)；request.setAttribute('error '，e . GetClass())；request.setAttribute('reason '，e . getmessage())；堆栈跟踪元素[]arr=e . getstack trace()；请求。setattribute(' stack trace elements '，arr)；返回"页面/错误/索引。JSP”；} }2.使用jquery.form.js的ajaxSubmit方法超文本标记语言代码以及爪哇岛代码保持不变，给id=按钮的按钮添加事件

$('#button ').click(function(){ var hideForm=$(' form ')；var options={ dataType : 'json '，/* data : { ' file ' : $(' input[type=file]').val()，' username': '123 '，password: '123'}，*/before submit : function(){ alert('正在上传');},成功：函数（结果){ alert('成功上传!');},错误：函数（结果){ } };hideForm.ajaxSubmit(选项);});3.在后台使用一个用户对象接收用户名和密码。

表单操作='文件上传/文件上传'方法=' post ' enctype=' multipart/form-data '输入类型=“文件”名称=“文件”输入类型='提交'值='提交'/表单有可能你会按照下面的步骤做：封装表单数据作为一个数据对象，给上面的射流研究…代码添加数据数据： { ' file ' : $(' input[type=file]').val()，' user':{'username': '123 '，password: '123'}}在此处其实是画蛇添足，这种情况下发送的请求的详细情况如图：

此时页面会报错415。-最合理的代码应该是：html代码与一相同，js代码与2相同，java代码公共字符串文件上传1(@RequestParam('文件')多部分文件文件，用户用户){ 0而且用户、前面不能加@RequestBody。

更多精彩内容，请点击《jQuery上传操作汇总》 , 《spring上传下载专题》 进行深入学习和研究。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。