点我下载工程代码
由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用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因此你知道的。
点我下载工程代码

原文：http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html

jquery之ajaxfileupload异步上传插件的更多相关文章

  1. 【文件上传】jquery之ajaxfileupload异步上传插件

    来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用J ...

  2. 基于struts2的ajaxfileupload异步上传插件的使用

    服务器端采用struts2来处理文件上传. 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1 ...

  3. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  4. 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  5. JQuery插件ajaxFileUpload 异步上传文件（PHP版）

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  6. JQuery插件ajaxFileUpload 异步上传文件

    一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事 ...

  7. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

  8. jquery ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  9. jQuery 异步上传插件 Uploadify302 使用 （JavaEE Spring MVC）

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.而且是Ajax的,省去了自己写Ajax上传功能的麻烦.不过官方提供的实例时php版本的,本文将详细介绍Uploadify ...

随机推荐

  1. 由 Windows 向 Linux 迁移字体 和 Linux 等宽字体

    1. From Windows Windows下字体库的位置为C:\Windows\fonts,这里面包含所有windows下可用的字体.2. To Linux linux的字体库是 /usr/sha ...

  2. Java基础知识强化之IO流笔记48：IO流练习之 复制单级文件夹案例

    1. 复制单级文件夹     数据源:e:\\demo     目的地:e:\\test 分析: A:封装目录 B:获取该目录下的所有文本的File数组 C:遍历该File数组,得到每一个File对象 ...

  3. Linux 下mysql忘记root密码解决方法

    忘记root密码怎么办:1.关闭数据库2.使用-->mysqld_safe --skip-grant-tables &--<启动数据库3.使用空密码进入数据库(mysql命令后直接 ...

  4. $stop and $finish in verilog

    $stop - Pauses the simulation, so you can resume it by using fg command in linux. In this case lince ...

  5. <input> 标签

    HTML5 中的新属性.   属性 值 描述 accept mime_type 规定通过文件上传来提交的文件的类型. align left right top middle bottom 不赞成使用. ...

  6. javaweb 中的乱码问题

    一.post 方式 首先我们看下面一段代码,在该HTML中我们指定的编码为“UTF-8”,如图所示. 在该代码中,我们将表单数据提交给ParamServlet 处理 servlet 会将接收到的数据打 ...

  7. 实战突击： Java Web项目整合开发(PDF)

    实战突击:  Java  Web项目整合开发(PDF)

  8. HOOK函数(一)——进程内HOOK

    什么是HOOK呢?其实很简单,HOOK就是对Windows消息进行拦截检查处理的一个函数.在Windows的消息机制中,当用户产生消息时,应用程序通过调用GetMessage函数取出消息,然后把消息放 ...

  9. java新手笔记17 参数

    package com.yfs.javase; public class ParamDemo { public static void main(String[] args) { int a = 3, ...

  10. STL之优先队列

    STL 中优先队列的使用方法(priority_queu) 基本操作: empty() 如果队列为空返回真 pop() 删除对顶元素 push() 加入一个元素 size() 返回优先队列中拥有的元素 ...