jquery + struts2 实现异步上传文件
struts2上传文件是通过提交form表单的方式实现的,如果需要实现异步上传文件的话 ,就需要借助jquery的异步提交表单的功能了,要用到jquery.form.js文件。
首先要加载相关js文件:
<script language="JavaScript" src="<%=request.getContextPath()%>/jq/jquery-1.8.3.js"></script> <script language="JavaScript" src="<%=request.getContextPath()%>/jq/jquery.form.js"></script>
form标签:
<form id="upload" action="./admin/score/upload.do" method="post" enctype="multipart/form-data" > <div style="margin:30px 0px 0px 0px;"> <table> <tr > <td><label class="forminfo">上传文件:</label></td> <td><input id="file" type="file" name="file" style="border: thin solid #CCCCCC;"/></td> <td><input type="submit" value="提交文件" style="height:25px;width:80px;"/></td> </tr> </table> </form>
jquery代码:
$(function(){ $("#upload").submit(function(){ var first = $("#first").val(); var second = $("#second").val(); var third = $("#third").val(); $(this).ajaxSubmit({ data: {first:first,second:second,third:third }, dataType: "json", resetForm: true, success: function(data) { if(data.result != null){ //根据返回信息,更新提示窗口内容 $("#result").html(data.result); //显示提示窗口 $(".tip").fadeIn(200); } } }); } return false; }); });
解析:
首先获取表单的submit事件,然后在事件里调用ajaxSubmit方法,即能异步提交表单。
在方法中可以声明若干参数,按需选择
url 提交表单数据的URL
type 提交表单数据的方法get 或 post
data 需要提交的参数键值对列表
datatype 声明返回的数据类型,有xml 、json、script 三种,如果返回类型与声明的不同,则回调函数无法执行
resetForm 如果为true 则成功后重置form 表单
success 成功后的回调函数,执行成功后的操作。在我的例子里,根据返回的信息更新提示窗口的内容,然后显示提示窗口
最后执行完ajaxSubmit方法后,则需要return false ,以阻止页面中的form表单提交。
Action类中要声明对应的文件、文件名、文件类型,并有相应get 和set方法
private File file; private String fileFileName; private String fileContentType;
最后是Action方法:
public String upload() throws FileNotFoundException{ //获取项目上中指定的保存上传文件的文件夹路径 String path = ServletActionContext.getServletContext().getRealPath("/upload"); //打开上传文件输入流 FileInputStream fis = new FileInputStream(file); //打开目标文件夹输出流 FileOutputStream fos = new FileOutputStream(new File(path,fileFileName)); //输入流转成字节,并用输出流写入文件 byte[] b = new byte[1024]; int length = 0; try { while((length = fis.read(b))!=-1){ fos.write(b,0,b.length); //写入文件 } fis.close(); fos.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } return SUCCESS; }
好了,文件异步上传步骤大概就是如此,希望能给学习者有一个合理的参考。
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17