欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery ajaxfileupload异步上传插件

程序员文章站 2022-03-20 21:43:56
本文实例为大家分享了ajaxfileupload异步上传插件的使用方法,供大家参考,具体内容如下 服务器端采用struts2来处理文件上传。 所需环境: jque...

本文实例为大家分享了ajaxfileupload异步上传插件的使用方法,供大家参考,具体内容如下

服务器端采用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因此你知道的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。