博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【文件上传】jquery之ajaxfileupload异步上传插件
阅读量:4461 次
发布时间:2019-06-08

本文共 4300 字,大约阅读时间需要 14 分钟。

来自:

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

转载于:https://www.cnblogs.com/helloxiaoxiang/p/3732773.html

你可能感兴趣的文章
java开发环境搭建-慕课网
查看>>
NOIP2015-D2T3运输计划
查看>>
Z :彻底了解指针数组,数组指针以及函数指针 [复
查看>>
用的好好的,Cygwin变的不好用了。
查看>>
2013年终总结
查看>>
在IIS中部署.net core应用
查看>>
hihocoder编程练习赛52-3 部门聚会
查看>>
Start to study Introduction to Algorithms
查看>>
AE常见接口之间的关系(较笼统)+arcgis常见概念
查看>>
正则表达式
查看>>
三元操作设计不同类型的时候,最终结果的问题
查看>>
POJ 1661 Help Jimmy LIS DP
查看>>
大数据时代,我诚惶诚恐的拥抱
查看>>
c++小游戏——五子棋
查看>>
浏览器全屏非全屏切换
查看>>
2.CSS 颜色代码大全
查看>>
Native与H5交互的一些解决方法
查看>>
三、基于hadoop的nginx访问日志分析--计算时刻pv
查看>>
SpringCloud Config客户端
查看>>
OAuth 开放授权 Open Authorization
查看>>