点我下载工程代码
由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用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. [置顶] c#对于文件的操作

    在system.iO:命名空间中提供了两种遍历枚举文件夹的类,Directory 和DirectoryInfo, 他们都有一个方法GetDirectories():来便利枚举文件夹, /// < ...

  2. 解决Ubuntu下sublime中不能输入中文的问题

    解决Ubuntu下sublime中不能输入中文的问题 Ubuntu下安装sublime后,不能输入中文,而在其他软件中能正常输入,这是sublime的bug,解决方案是在通过shell在每次运行sub ...

  3. INI文件的读写

    public class INIoperation { string inipath = Utils.GetMapPath("/Integration/Sync/set.ini") ...

  4. netMVC 搭建Ucenter 同步登陆退出discuz

    先看一下效果

  5. ios objection

    给大家介绍个不错的团队开发模块化工具objection 1. setup<这里我只介绍ios相关> rake artifact:ios cp -R build/Release-iphone ...

  6. Cell的重用机制

    static NSString *resuseId=@"cell"; UITableViewCell *cell=[tableView dequeueReusableCellWit ...

  7. 100个iOS开发面试题汇总－王刚韧的技术博客

    100个iOS开发面试题汇总 关于iOS开发面试,不管对于招聘和应聘来说,面试都是很重要的一个环节,特别对于开发者来说,面试中的技术问题环节不仅是企业对应聘者技能和积累的考察,也是一个开发者自我检验的 ...

  8. css层叠顺序

    优先级: 1.添加!important规则的分组享有最高优先级:会将所有不带!important的规则 例如:#id{border:6px solid black!important}高于#id{bo ...

  9. P1417 烹调方案

    P1417 烹调方案 题目提供者tinylic 标签 动态规划 难度 普及+/提高 题目背景 由于你的帮助,火星只遭受了最小的损失.但gw懒得重建家园了,就造了一艘飞船飞向遥远的earth星.不过飞船 ...

  10. Gradle实战教程之依赖管理

    这是从我个人网站中复制过来的,原文地址:http://coolshell.info/blog/2015/05/gradle-dependency-management.html,转载请注明出处. 简要 ...