ssh3中利用ajaxfileupload无刷新上传文件

JSP文件上传示例

最新推荐文章于 2025-12-05 20:00:00 发布

最新推荐文章于 2025-12-05 20:00:00 发布 · 108 阅读

文章标签：

#Ajax #jQuery #JavaScript #json #CSS #ViewUI

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文展示了一个使用JSP和jQuery实现的文件上传示例，包括前端页面代码和后端处理逻辑。前端通过Ajax实现文件上传请求，并显示加载提示；后端采用Struts2框架处理文件上传，并返回JSON格式的结果。

1.jsp代码：( 注意这里的jquery只能用1.2.1,我试了1.3.2会报错:( )

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="../js/ajaxfileupload/ajaxfileupload.css" type="text/css" title='main' media="screen" />
	
<script src="../js/json.js" type="text/javascript"></script>
<script src="../js/ajaxfileupload/jquery.js" type="text/javascript"></script>
<script src="../js/ajaxfileupload/ajaxfileupload.js" type="text/javascript"></script>

<title>haha</title>
</head>
<body>
<form action="" enctype="multipart/form-data">
	<input type="file" name="upload" id="upload" /><input type="button" value="upload" onclick="javascript:upload_files();" /><p/>
</form>
<img id="loading" src="../images/loading.gif" style="display:none;" />
</body>

<script>
		
	function upload_files(){
		$("#loading")
		.ajaxStart(function(){
			$(this).show();
		})
		.ajaxComplete(function(){
			$(this).hide();
		});
		
		$.ajaxFileUpload
		(
			{
				url:'../demo/test!ajax_upload?id=1',
				secureuri:false,
				fileElementId:'upload',
				dataType: 'json',
				success: function (data, status)
        {
            alert( data.resultText);
            alert( data.extra );
        },
        error: function (data, status, e)
        {
            alert(e);
        }

			}
		)
	}
	
</script>

</html>

action代码：

package com.prl.action.demo;

import java.io.File;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.convention.annotation.ParentPackage;
import org.json.JSONObject;
import org.springside.modules.web.struts2.Struts2Utils;

import com.prl.action.BaseAction;
import com.prl.common.CommonUtil;
import com.prl.helper.JsonResult;

@ParentPackage(value="noneedlogin")
public class TestAction extends BaseAction{
	private File upload;
	private String uploadFileName;
	private String uploadUploadContentType;
	private Long id ;
	public String ajax_demo(){
		HttpServletRequest request = Struts2Utils.getRequest();
		CommonUtil.printAllParam(request);
		
		System.out.println("jsonString==============="+request.getParameter("toJSONString"));
		
		JsonResult jsonResult = new JsonResult("0","成功");
		Struts2Utils.renderText(new JSONObject(jsonResult).toString());
		
		return null;
	}
	
	public String ajax_upload(){
		System.out.println("id========="+id);
		System.out.println("uploadFileName========="+uploadFileName);
		JsonResult jsonResult = new JsonResult("0","成功");
		
		//前台的ajax.upload.js框架可能有bug,导致这个地方必须用renderHtml,不能用其它的
		Struts2Utils.renderHtml(new JSONObject(jsonResult).toString());
		//Struts2Utils.renderText(new JSONObject(jsonResult).toString());
		//Struts2Utils.renderJson(jsonResult);
		return null;
	}

	public File getUpload() {
		return upload;
	}

	public void setUpload(File upload) {
		this.upload = upload;
	}

	public String getUploadFileName() {
		return uploadFileName;
	}

	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}

	public String getUploadUploadContentType() {
		return uploadUploadContentType;
	}

	public void setUploadUploadContentType(String uploadUploadContentType) {
		this.uploadUploadContentType = uploadUploadContentType;
	}

	public Long getId() {
		return id;
	}

	public void setId(Long id) {
		this.id = id;
	}
}