`
zhangfeilo
  • 浏览: 399086 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
社区版块
存档分类
最新评论

jquery之ajaxfileupload异步上传插件

阅读更多

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

 

分享到:
评论

相关推荐

    jquery之ajaxfileupload异步上传插件(附工程代码)

    点我下载工程代码 由于项目需求,在处理文件... 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文件上传的Action 代码如下: package com.ajaxfile.action; imp

    jquery ajaxfileupload上传插件

    jquery ajaxfileupload上传插件,用于ajax的异步文件上传

    jQuery异步上传文件插件ajaxFileUpload详细介绍

    主要介绍了jQuery异步上传文件插件ajaxFileUpload详细介绍,本文首先讲解了ajaxFileUpload的参数、错误提示等知识,然后给出了简单使用实例和ASP.NET MVC模式下的使用实例,需要的朋友可以参考下

    jquery ajaxfileupload异步上传插件

    `jQuery Ajaxfileupload` 是一个用于异步文件上传的JavaScript插件,它允许用户在不刷新页面的情况下上传文件。这个插件是基于jQuery库构建的,因此需要在项目中引入jQuery.js来支持其功能。此外,为了实现异步上传...

    jquery ajaxfileupload.js

    jquery ajaxfileupload.js异步上传插件

    jquery ajaxfileupload异步上传插件使用详解

    1. **插件概述**:jQuery AjaxFileUploader是一个基于jQuery的异步文件上传插件。它封装了AJAX文件上传的功能,使其简单化,并且还支持多种文件校验、上传进度条等高级功能。 2. **基本用法**: - 首先,需要在...

    jQuery插件ajaxFileUpload异步上传文件

    `jQuery.ajaxFileUpload` 是一个用于异步上传文件的jQuery插件,它的主要特点是通过创建隐藏的表单和iframe来实现文件的非刷新上传,并且其API设计类似于jQuery的AJAX方法,使得开发者更容易理解和使用。这个插件并...

    ajaxfileupload.js 异步上传jquery插件

    **AjaxFileUpload.js** 是一个基于 jQuery 的异步文件上传插件,它允许用户在不刷新页面的情况下上传文件,提供了一种便捷、高效的文件交互体验。这个插件广泛应用于网页应用,尤其是那些需要用户交互频繁上传文件的...

    jquery 插件ajaxfileupload与struts2结合 实现异步上传图片

    在本文中,我们将深入探讨如何将jQuery插件AjaxFileUpload与Struts2框架结合,以实现异步图片上传的功能。这种技术在现代Web应用中非常常见,它提升了用户体验,允许用户在不刷新整个页面的情况下上传文件,特别是...

    ajaxfileupload.js(异步上传文件插件)

    jquery的一款异步文件上传插件,我博客中有关于此插件的详细教程。 handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s....

    jquery+ajaxfileupload+html文件上传

    AjaxFileUpload是jQuery的一个插件,专门用于实现异步文件上传。它利用Ajax技术实现了在不刷新页面的情况下上传文件,提高了用户体验。这个插件的核心在于它可以监听文件选择事件,然后在后台上传文件,同时可以显示...

    jquery.ajaxFileUpload

    综上所述,jQuery插件AjaxFileUpload提供了一种便捷的文件异步上传解决方案,通过合理的配置和适当的服务器端处理,可以构建高效、友好的文件上传功能。在实际应用中,可以根据需求进行定制和扩展,提升用户体验。

    jQuery ajaxFileUpload.js 插件 ie9 下bug 修复

    `jQuery ajaxFileUpload.js` 是一个用于处理文件上传的 jQuery 插件,它允许用户在不刷新页面的情况下实现异步文件上传。这个插件在现代浏览器中通常运行良好,但像许多其他JavaScript库一样,它可能在较老的浏览器...

    PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

    PHP结合jQuery插件ajaxFileUpload实现文件的异步上传是一个在Web开发中非常实用的功能,尤其是在用户界面友好性和用户体验方面。它允许用户在不刷新页面的情况下上传文件,提高了应用的响应速度和交互性。以下是详细...

    上传文件 commons-fileupload-1.1.jar jquery.ajaxfileupload.js 以及demo

    接下来,`jquery.ajaxfileupload.js` 是一个基于jQuery的文件上传插件,它扩展了jQuery的Ajax功能,使得在前端可以通过异步方式实现文件上传,提升用户体验。该插件的主要特性包括: 1. 异步上传:使用Ajax技术,...

Global site tag (gtag.js) - Google Analytics