温馨提示:您的每一次转载,体现了我写此文的意义!!!烦请您在转载时注明出处http://www.blogjava.net/sxyx2008/谢谢合作!!!

jquery之ajaxfileupload异步上传插件 -凯发k8网页登录

温馨提示:您的每一次转载,体现了我写此文的意义!!!烦请您在转载时注明出处http://www.blogjava.net/sxyx2008/谢谢合作!!!


由于项目需求,在处理文件上传时需要使用到文件的异步上传。这里使用jquery ajax file uploader这个组件下载地址
服务器端采用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因此你知道的。

posted on 2010-11-02 16:57 雪山飞鹄 阅读(60552) 评论(11)     所属分类: struts2js
# re: jquery之ajaxfileupload异步上传插件 2012-04-17 20:08
谢谢  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2013-03-20 11:08
非常感谢  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2013-03-23 14:03
非常感谢!  回复  
  

# re: jquery之ajaxfileupload异步上传插件[未登录] 2013-03-28 13:55
非常感谢,真的可以用  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2013-05-10 17:06
如果我想发送文件
同时在发送一些字符串到服务器,该怎么实现呢
我现在能把文件发到服务器端了  回复  
  

# re: jquery之ajaxfileupload异步上传插件[未登录] 2013-06-20 16:02
真的很感激你啊,楼主好人啊!今天找了很多资料,一直纠结到底应该使用什么框架来完成自己的ajax应用。看到楼主的文章我豁然开朗,决定使用jq。之前用过jq,感觉比较容易上手。  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2013-09-03 12:08
fdfaffaf  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2013-09-06 15:49
请问一个问题啊,使用这个ajaxfileupload.js 这个插件为什么会用到jquery ajax 全局事件啦 按理说它是一个form提交 根本就使用不到 ajax 全局事件啊 但是使用这种jquery.event.trigger 事件的方式 。 这是为什么啊 ??? from 表达提交为什么会使用到 ajax 事件的全局事件。  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2014-04-27 15:31
thank you very much  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2014-08-02 23:05
用这个组件上传的文件都是修改了文件的名字,怎么才能获取上传文件原来的名字,并且保存在服务端时,名字不更改,我在fileloadservelt中改了一下代码,但是没有获取到原来文件的名字。。。。还请哪位知道的说一下  回复  
  

# re: jquery之ajaxfileupload异步上传插件 2016-02-16 17:02
为什么我点击“上传”按钮没有作用?  回复  
  

网站地图