Ajax上传文件

发布时间：2020-12-15 21:31:01 所属栏目：百科来源：网络整理

导读：在不支持HTML5的浏览器上，并不支持纯Ajax上传文件，这时可以使用插件jquery.form.js，官网http://malsup.com/jquery/form。客户端代码： %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%%String path = request.getContextPath();%!D

在不支持HTML5的浏览器上，并不支持纯Ajax上传文件，这时可以使用插件jquery.form.js，官网http://malsup.com/jquery/form。

客户端代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
	<script type="text/javascript" src="<%=path %>/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="<%=path %>/js/jquery.form.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		    $('#form').ajaxForm({
		        dataType: 'json',uploadProgress: function(event,position,total,percentComplete) {
			        $("#progress").html(percentComplete + "%");
			    },success: function(r){
		        	alert(r.file);
		        	alert(r.fileName);
		        	alert("公司名称：" + r.companyName + ",注册码：" + r.registCode + 
						"所属县区：" + r.area + "详细地址：" + r.addr);
		        },complete: function(xhr) {
					$("#status").html(xhr.responseText);
				}
		    });
		});
	</script>
  </head>
  
  <body>
    <form id="form" method="post" enctype="multipart/form-data" action="ajaxUpload">
    	<label>公司名称：</label><input name="companyName" type="text" /><br/>
    	<label>注册码：</label><input name="registCode" type="text" /><br/>
    	<label>所属县区：</label><input name="area" type="text" /><br/>
    	<label>详细地址：</label><input name="addr" type="text" /><br/>
    	<label>公司图片：</label><input name="file" type="file" accept="*/*" multiple="multiple" /><br/>
    	<input type="submit" value="提交" />
    </form>
    <span id="progress"></span><br/>
    <span id="status"></span>
  </body>
</html>

服务端代码（struts2）：

package org.zzj.action;

import java.io.File;
import java.io.IOException;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class AjaxFileUploadAction {
	private File[] file;
	private String[] fileFileName;
	
	public File[] getFile() {
		return file;
	}
	public void setFile(File[] file) {
		this.file = file;
	}
	public String[] getFileFileName() {
		return fileFileName;
	}
	public void setFileFileName(String[] fileFileName) {
		this.fileFileName = fileFileName;
	}
	
	public void upload() throws IOException{
		JSONObject result = new JSONObject();
		JSONArray fileArray = new JSONArray();
		JSONArray fileNameArray = new JSONArray();
		for (int i = 0; i < file.length; i++) {
			fileArray.add(file[i].getPath());
			fileNameArray.add(fileFileName[i]);
		}
		result.put("file",fileArray);
		result.put("fileName",fileNameArray);
		
		
		HttpServletRequest request = ServletActionContext.getRequest();
		String companyName = request.getParameter("companyName");
		String registCode = request.getParameter("registCode");
		String area = request.getParameter("area");
		String addr = request.getParameter("addr");
		result.put("companyName",companyName);
		result.put("registCode",registCode);
		result.put("area",area);
		result.put("addr",addr);
		
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("UTF-8");
		response.getWriter().write(result.toString());
	}
}

经测试，在IE9上，uploadProgress方法无效。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!