jquery之ajaxfileupload异步上传插件(附工程代码)

点我下载工程代码

  由于项目需求,在处理文件上传时需要使用到文件的异步上传。这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6

  服务器端采用struts2来处理文件上传。

  所需环境:

  jquery.js

  ajaxfileupload.js

  struts2所依赖的jar包

  及struts2-json-plugin-2.1.8.1.jar

  编写文件上传的Action

  

复制代码 代码如下:

  package com.ajaxfile.action;

  import java.io.File;

  import java.io.FileInputStream;

  import java.io.FileOutputStream;

  import org.apache.struts2.ServletActionContext;

  import com.opensymphony.xwork2.ActionSupport;

  @SuppressWarnings("serial")

  public class FileAction extends ActionSupport {

  private File file;

  private String fileFileName;

  private String fileFileContentType;

  private String message = "你已成功上传文件";

  public String getMessage() {

  return message;

  }

  public void setMessage(String message) {

  this.message = message;

  }

  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 String getFileFileContentType() {

  return fileFileContentType;

  }

  public void setFileFileContentType(String fileFileContentType) {

  this.fileFileContentType = fileFileContentType;

  }

  @SuppressWarnings("deprecation")

  @Override

  public String execute() throws Exception {

  String path = ServletActionContext.getRequest().getRealPath("/upload");

  try {

  File f = this.getFile();

  if(this.getFileFileName().endsWith(".exe")){

  message="对不起,你上传的文件格式不允许!!!";

  return ERROR;

  }

  FileInputStream inputStream = new FileInputStream(f);

  FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());

  byte[] buf = new byte[1024];

  int length = 0;

  while ((length = inputStream.read(buf)) != -1) {

  outputStream.write(buf, 0, length);

  }

  inputStream.close();

  outputStream.flush();

  } catch (Exception e) {

  e.printStackTrace();

  message = "对不起,文件上传失败了!!!!";

  }

  return SUCCESS;

  }

  }

  struts.xml

  

复制代码 代码如下:

  <?xml version="1.0" encoding="UTF-8" ?>

  <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">

  <struts>

  <package name="struts2" extends="json-default">

  <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">

  <result type="json" name="success">

  <param name="contentType">

  text/html

  </param>

  </result>

  <result type="json" name="error">

  <param name="contentType">

  text/html

  </param>

  </result>

  </action>

  </package>

  </struts>

  注意结合Action观察struts.xml中result的配置。

  contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。

  文件上传的jsp页面

  

复制代码 代码如下:

  <%@ 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">

  <title>Insert title here</title>

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

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

  <script type="text/javascript">

  function ajaxFileUpload()

  {

  $("#loading")

  .ajaxStart(function(){

  $(this).show();

  })//开始上传文件时显示一个图片

  .ajaxComplete(function(){

  $(this).hide();

  });//文件上传完成将图片隐藏起来

  $.ajaxFileUpload

  (

  {

  url:'fileUploadAction.action',//用于文件上传的服务器端请求地址

  secureuri:false,//一般设置为false

  fileElementId:'file',//文件上传空间的id属性 <input type="file" id="file" name="file" />

  dataType: 'json',//返回值类型 一般设置为json

  success: function (data, status) //服务器成功响应处理函数

  {

  alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量

  if(typeof(data.error) != 'undefined')

  {

  if(data.error != '')

  {

  alert(data.error);

  }else

  {

  alert(data.message);

  }

  }

  },

  error: function (data, status, e)//服务器响应失败处理函数

  {

  alert(e);

  }

  }

  )

  return false;

  }

  </script>

  </head>

  <body>

  <img src="loading.gif" id="loading" style="display: none;">

  <input type="file" id="file" name="file" />

  <br />

  <input type="button" value="上传" onclick="return ajaxFileUpload();">

  </body>

  </html>

  注意观察<body>中的代码,并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序,ajaxfileupload.js依赖于jquery因此你知道的。

  点我下载工程代码