使用jquery.form.js实现无刷新上传文件

最新推荐文章于 2024-04-30 17:35:01 发布

zhangzeyuaaa

最新推荐文章于 2024-04-30 17:35:01 发布

阅读量4.5k

点赞数 1

分类专栏： Web前端

本文链接：https://blog.csdn.net/zhangzeyuaaa/article/details/52203854

版权

Web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在不支持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方法无效。

zhangzeyuaaa

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jquery.form.js实现无刷新上传文件

在不支持HTML5的浏览器上，并不支持纯Ajax上传文件，这时可以使用插件jquery.form.js，官网http://malsup.com/jquery/form。客户端代码：<%String path = request.getContextPath();%> My JSP 'index.jsp' starting page /js/jquery-1.8.3.
复制链接

扫一扫