Struts2 使用Jquery+ajax 文件上传

话不多说 直接上代码

前台js:

 1 var formData = new FormData();
 2 formData.append("file1",$("#file1")[0].files[0]);//第一个file1代表后台文件属性名,第二个file1表示html中input的id
 3 $.ajax({
 4     type:"post",
 5     url:"ajax/uploadFile",
 6     data:formData,
 7     processData : false,
 8     contentType : false,
 9     success : function(res) {
10         console.log(res);
11         if(res=="success"){
12             $("#labResult").text("文件上传成功");
13         }
14     },
15     error : function(msg) {
16         console.log(msg.responsText);
17     }
18 });

后台java:

 1 import java.io.File;
 2 import java.io.FileInputStream;
 3 import java.io.FileOutputStream;
 4 import java.io.IOException;
 5 import java.io.InputStream;
 6 import java.io.OutputStream;
 7
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10
11 import org.apache.struts2.ServletActionContext;
12
13 import com.opensymphony.xwork2.ActionContext;
14 import com.opensymphony.xwork2.ActionSupport;
15
16 public class UploadAction extends ActionSupport{
17     private File file1 ;
18     private String file1FileName ;//FileName为固定写法
19     public File getFile1() {
20         return file1;
21     }
22     public void setFile1(File file1) {
23         this.file1 = file1;
24     }
25     public String getFile1FileName() {
26         return file1FileName;
27     }
28     public void setFile1FileName(String file1FileName) {
29         this.file1FileName = file1FileName;
30     }
31     public String uploadFile() throws Exception {
32
33         String path = ServletActionContext.getRequest().getServletContext().getRealPath("/WEB-INF/upload");
34         //查看是否存在目录 不存在则创建
35         File file = new File(path);
36         //如果目录不存在
37         if(!file.exists()){
38             file.mkdirs();
39         }
40         //文件不为空 则上传
41         if(file1!=null){
42             //输出流
43             OutputStream os = new FileOutputStream(new File(path,file1FileName));
44             //输入流
45             InputStream is = new FileInputStream(file1);
46
47             byte[] buf = new byte[1024];
48             int length = 0 ;
49
50             while(-1 != (length = is.read(buf) ) )
51             {
52                 os.write(buf, 0, length) ;
53             }
54             is.close();
55             os.close();
56         }
57         return "success";
58     }
59
60     public void uploadFile(){
61         System.out.println("file1:"+file1+".");
62         System.out.println("file1FileName:"+file1FileName+".");
63         String path="";
64         try {
65             path=uploadFile();
66             HttpServletResponse response = ServletActionContext.getResponse();
67             response.setContentType("text/html;charset=utf-8");
68             response.getWriter().write(path);
69         } catch (Exception e) {
70             e.printStackTrace();
71         }
72     }
73 }

struts:

<package name="ajax" extends="json-default" namespace="/ajax">
    <action name="uploadFile" class="包名.UploadAction" method="uploadFile"></action>
</package>

有啥不懂,底下留言。

时间: 2024-12-22 10:30:41

Struts2 使用Jquery+ajax 文件上传的相关文章

兼容ie的jquery ajax文件上传

Ajax文件上传插件很多,但兼容性各不一样,许多是对ie不兼容的,另外项目中是要求将网页内容嵌入到桌面端应用的,这样就不允许带flash的上传插件了,如:jquery uploadify...悲剧 对于Ajax文件上传,大体是有: 1.创建一个input type="file" 的文件上传按钮,根据其id监听绑定其change事件,在事件中用jquery创建一个iframe,嵌入添加隐藏form,同时创建input type="file",id相同的文件上传按钮,并

ASP.NET 异步Web API + jQuery Ajax 文件上传代码小析

该示例中实际上应用了 jquery ajax(web client) + async web api 双异步. jquery ajax post 1 $.ajax({ 2 type: "POST", 3 url: "/api/FileUpload", 4 contentType: false, 5 processData: false, 6 data: data, 7 success: function (results) { 8 ShowUploadControl

jQuery ajax 文件上传

html javascript var dat = new FormData() dat.append('prefix', $(':input[name=prefix]').val()) dat.append('file', $(':input[name=upfile]')[0].files[0]) var req = $.ajax({ url: $('#upload').attr('action'), data: dat, dataType: 'json', type: 'POST', con

Javascript Fromdata 与jQuery 实现Ajax文件上传以及文件的删除

前端HTML代码: <!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css&qu

Javascript Fromdata 与jQuery 实现Ajax文件上传

<!DOCTYPE html> <html> <head> <title>ajax</title> <script type="text/javascript" src="js/jquery.js"></script> <meta charset="utf-8" /> <style type="text/css"> fo

jQuery插件AjaxFileUpload实现ajax文件上传时老是执行error方法 问题原因

今天在用jQuery插件AjaxFileUpload实现ajax文件上传时,遇到一个问题,如图: 老是执行error,无法执行succes方法,追踪ajaxfileupload.js源码发现: 当执行if(type=="json")    eval("data = "+data);会抛出异常,导致在处理异常的时候将status = "error" 因此一直执行error方法. 上网查询,得知eval函数是用来执行一段js代码,而并不是如我所想的反

jquery ajax实现上传文件代码,带进度条

原文:jquery ajax实现上传文件代码,带进度条 源代码下载地址:http://www.zuidaima.com/share/1550463291116544.htm ajax上传文件代码,带进度条的. 首页 http://localhost:端口/项目名/common/test.htm 上传中 标签: jquery ajax 上传 进度条话题: Web开发 前端技术 jquery ajax实现上传文件代码,带进度条

jQuery插件AjaxFileUpload实现ajax文件上传

jQuery插件AjaxFileUpload用来实现ajax文件上传,该插件使用非常简单,接下来写个demo演示怎么用AjaxFileUpload插件实现文件上传. 1.引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script> <script type=&qu

【Jsp】使用AjaxFileUploader与jspsmartupload完成不刷新的Ajax文件上传系统

这个不刷新的Ajax文件上传系统同样可以用来做预览图 虽然预览图完全可以通过不上传图片就完成,但是不刷新的Ajax文件上传系统可以做到上传完图片立即返回上传结果给用户的结果 上次在<[Jsp]使用jspsmartupload完成简单的文件上传系统>(点击打开链接)一文中完成了一个简单的文件上传系统 但是这个文件上传系统过于传统, 上传完文件之后需要跳转到另外一个页面中提交表单,处理表单,然后再提供一个"返回"按钮给用户 如果用户要求上传之后,马上看到图片,并且不跳转,只好利