ajax+struts实现文件上传

本文介绍了一种使用HTML和JavaScript实现的单文件和多文件上传的方法。具体包括使用input标签选择文件,通过jQuery和ajaxfileupload插件进行异步文件上传,以及在服务器端采用Struts2框架配合FileUtils或IO流完成文件存储的过程。

单文件上传:

一.input标签 

<input type="file" id="upload" name="pic" ><br>

二.ajax

    1.   按照顺序引入先引入jquery的js,再引入ajaxfileupload的js,后者的js依赖前者的js

       <script type="text/javascript" src="js/jquery-2.0.3.min.js" ></script>

       <script type="text/javascript" src="js/ajaxfileupload.js"></script>

    2.

$.ajaxFileUpload({
				url : '${pageContext.request.contextPath}/AjaxUpload/upload',	//action的路径	
				secureuri : false,//一般设置为false
				fileElementId : 'upload',//文件上传标签的id属性
				dataType : 'json',//返回值类型 一般设置为json
				success : function(data, status){ //服务器成功响应处理函数
					alert(data.message);
				},
				error: function (data, status, e){ //服务器响应失败处理函数
                                    alert("上传图片失败!");
                                }

			    });

三.action   @Namespace("/AjaxUpload")   @ParentPackage("struts-default")

    1.属性+get、set方法

                private File pic;//命名要与标签的name属性一致

	        private String picFileName;//在上面的属性后面加上FileName

    2.方法,不需要跳转页面

       通过FileUtils.copyFile(File,File)方法上传文件

                @Action(value="upload")
	        public void upload() throws IOException{
		        String savePath="E:/java/tomcat/apache-tomcat-7.0.42/webapps/img/";//图片保存路径
                        FileUtils.copyFile(pic, new File(savePath+picFileName));  //上传图片,需要common-iojar包
                        HttpServletResponse response = ServletActionContext.getResponse();//获取response
                        HttpServletResponse response = ServletActionContext.getResponse();//获取response
		        Writer writer = response.getWriter();//获取输出流
                        String str="{\"message\":\"图片添加成功\"}";
			writer.write(str.getBytes("utf-8"));//传一个json字符串到前端,中文设置编码
		        writer.close();//关闭输出流    
                }

    通过io流上传文件

                  @Action(value="upload")
	        public void upload() throws IOException{
		        String savePath="E:/java/tomcat/apache-tomcat-7.0.42/webapps/img/";//图片保存路径
                          /*io流上传文件*/
                        OutputStream out = new FileOutputStream(new File(savePath+picFileName));//获取输出流
	        	FileInputStream in = new FileInputStream(pic);//获取输入流
		        byte[] b=new byte[1024];//缓冲区
	        	int len;//记录每次读取的长度
		        //读取文件然后将文件写到规定地址
		        while((len=in.read(b))!=-1){
		        	out.write(b, 0, len);
	        	}
                        HttpServletResponse response = ServletActionContext.getResponse();//获取response
                        HttpServletResponse response = ServletActionContext.getResponse();//获取response
		        Writer writer = response.getWriter();//获取输出流
                        String str="{\"message\":\"图片添加成功\"}";
			writer.write(str.getBytes("utf-8"));//传一个json字符串到前端,中文设置编码
		        writer.close();//关闭输出流writer    
	              out.close();//关闭输出流out
	              in.close();//关闭输入流in
}

多文件上传(部分进行修改):

一.input标签

    加上mutiple="mutiple"属性

<input type="file" id="upload" name="pic" multiple="multiple" >

二.action

    1.属性类型变为相应的数组类型

 private File[] pic;//文件
 private String[] picFileName;//文件名

    2.对文件上传部分进行循环

for(int i=0;i<pic.length;i++){
        FileUtils.copyFile(pic[i], new File(basePath+picFileName[i]));//上传图片
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值