jquery ajaxfileupload异步上传插件_JavaScript

本文实例为大家分享了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因此你知道的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。