ajaxFileUpload 异步上传文件配合Struts2的简单使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cckevincyh/article/details/70198470

我在用SSH框架写一个简单的企业网站的时候需要对产品的图片进行异步上传,经过研究成功实现了ajaxFileUpload+Struts2的异步上传功能,所以抽空做下总结,本文主要讲解ajaxFileUpload 异步上传文件配合Struts2的简单使用

jQuery插件ajaxFileUpload可以实现ajax文件上传,使用非常简单。

准备环境

所需环境:
jquery.js
ajaxfileupload.js
struts2所依赖的jar包
Json-lib包相关的jar包
这里写图片描述

这里写图片描述

这里写图片描述

注意:jquery-1.4.2之后的版本和ajaxfileupload.js 报错:jQuery.handleError is not a function,详细解决方法可以参考我的博文:ajaxFileUpload :jQuery.handleError is not a function的解决方法

jsp页面的代码

<div class="form-group">    
    <label for="firstname" class="col-sm-2 control-label">产品图片</label>
    <div class="col-sm-9">
     <label for="inputfile"></label>
    <!--为了jquery获得basePath的值,必须写(如果没有更好的办法) -->
    <input type="hidden" value="<%=basePath%>" id="addBasePath"/>
    <input type="hidden" id="addImg"/>
    <!--id是给jquery使用的,name是给后台action使用的,必须和后台的名字相同!! -->
    <input type="file" id="addUpload" name="upload"/><br/>
    <label class="control-label" for="addUpload" style="display: none;"></label>    
     <p class="help-block"><!--上传成功后图片显示的位置 --><img class="img-rounded" width="100" height="100" id="img1" alt="上传成功" src="" />请上传产品图片</p>
    </div>
</div>

这里写图片描述

显示如下:

这里写图片描述

引入js的代码

//上传图片的方法,
function ajaxFileUpload1(){
    //获得basePath
    basePath=$('#addBasePath').val();
    //调用ajaxfileupload.js中的方法
    $.ajaxFileUpload({
        url:'user/fileUploadAction_fileUpload.action',//上传图片要提交到的action
        secureuri:false,//是否用安全提交,默认为false
        fileElementId:'addUpload',//file选择文件的框的id
        dataType:'json',//数据返回格式,如果用json,需要修改ajaxfileupload.js中的内容 eval("data = " + data ); -->data = jQuery.parseJSON(jQuery(data).text());
        success: function (data){
            //获得json格式数据的值,并转换显示图片在页面上
            $("#img1").attr("src",basePath+data.path);
            $("#addImg").val(data.path);
        }
    });
}

这里写图片描述

Struts中的Action代码

public class FileUploadAction {

    private File upload;
    private String uploadContentType;
    private String uploadFileName;//上传图片的名字
    public File getUpload() {
        return upload;
    }
    public void setUpload(File upload) {
        this.upload = upload;
    }
    public String getUploadContentType() {
        return uploadContentType;
    }
    public void setUploadContentType(String uploadContentType) {
        this.uploadContentType = uploadContentType;
    }
    public String getUploadFileName() {
        return uploadFileName;
    }
    public void setUploadFileName(String uploadFileName) {
        this.uploadFileName = uploadFileName;
    }



    public void fileUpload() throws IOException{
        //设置上传的路径
        String path = ServletActionContext.getServletContext().getRealPath("/ProductImg");

        File file = new File(path, uploadFileName);
        try {

            FileUtils.copyFile(upload, file);
            upload.delete();

            //将要传入页面的数据变成json格式
            JSONObject jsonObject=new JSONObject();
            String path2 = "ProductImg/"+uploadFileName;
            jsonObject.put("path", path2);
            //控制台输出格式化的json数据

            ServletActionContext.getResponse().getWriter().print(jsonObject);
        } catch (IOException e) {
            e.printStackTrace();
        }

    }
}

这里写图片描述

上传js代码和jsp页面的分析

这里写图片描述

jsp页面和Action代码的分析

这里写图片描述

上传js代码和Action代码的分析

这里写图片描述

ajaxFileUpload 异步上传需要注意的地方

数据返回格式,如果用json,需要修改ajaxfileupload.js中的内容

if ( type == "json" ) {  
     eval( "data = " + data );  
}     

改为

if ( type == "json" ) {  
   data = jQuery.parseJSON(jQuery(data).text());
}     

如图:
这里写图片描述

最后大功告成,可以成功上传了!
这里写图片描述

本例子没有对文件的类型进行限制和处理,但是基本的上传功能已完成。

如果你想看ajaxFileUpload +PHP的简单使用,可以查看我的博文:ajaxFileUpload 异步上传文件配合PHP的使用

没有更多推荐了,返回首页