Struts2 +jquery+ajaxfileupload 实现无刷新上传文件

最新推荐文章于 2021-01-17 15:54:03 发布

chenssss

最新推荐文章于 2021-01-17 15:54:03 发布

阅读量103

点赞数

文章标签： java json javascript ViewUI

本文链接：https://blog.csdn.net/chenssss/article/details/84270596

版权

由于项目需求，需要实现无刷新上传图片，在网上找了好多例子都不是很好最总让我找到了Struts2 +jquery+ajaxfileupload 方式，个人尝试下来比较的不错。

所用到的包和文件

struts2 core所有核心包和truts2-json-plugin 插件

ajaxfileupload.js文件

jquery.js 文件我使用的是jquery.1.2.1.js

jsp页面代码如下：

[html]view plaincopy
<%@ 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中定义的成员变量  
                    $("#testImg").attr("src",data.message);  
                    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();">  
        <img id="testImg" alt="" src="">  
    </body>  
</html>  

action代码

[java]view plaincopy
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();  
            this.setMessage("http://10.1.2.121:8080/ajaxfile/upload/"+this.getFileFileName());  
        } catch (Exception e) {  
            e.printStackTrace();  
            message = "上传异常!!!!";  
        }  
        return SUCCESS;  
    }  
  
}  

struts2配置文件

[html]view plaincopy
<?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>      

注意：在引入js文件的时候需要先引入jquery.js文件， ajaxfileupload.js依赖jquery文件。

chenssss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Struts2 +jquery+ajaxfileupload 实现无刷新上传文件

由于项目需求，需要实现无刷新上传图片，在网上找了好多例子都不是很好最总让我找到了Struts2 +jquery+ajaxfileupload 方式，个人尝试下来比较的不错。所用到的包和文件struts2 core所有核心包和truts2-json-plugin 插件ajaxfileupload.js文件jquery.js 文件我使用的是jquery.1.2.1.js...
复制链接

扫一扫