jquery之ajaxfileupload异步上传插件

2020-12-13 04:41

阅读：421

标签：style blog class c java tar

来自：http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html

由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用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 heretitle>
        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属性
                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>

注意观察

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

jquery之ajaxfileupload异步上传插件,搜素材,soscw.com

jquery之ajaxfileupload异步上传插件

标签：style blog class c java tar

原文地址：http://www.cnblogs.com/helloxiaoxiang/p/3732773.html

上一篇：TI OMAP3530/AM3715 WINCE 6.0 平台调试口修改

下一篇：WebApi系列~QQ互联的引入(QConnectSDK)

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jquery之ajaxfileupload异步上传插件
文章链接：http://soscw.com/index.php/essay/29761.html

亲，登录后才可以留言！

jquery之ajaxfileupload异步上传插件

评论

热门文章

推荐文章

最新文章

置顶文章