ajaxfileupload.js、struts2、ajax、json异步上传图片

最新推荐文章于 2021-09-21 20:12:57 发布

doudou_demo

最新推荐文章于 2021-09-21 20:12:57 发布

阅读量2.1k

点赞数

分类专栏： javaweb 文章标签： ajax struts2.0 异步

本文链接：https://blog.csdn.net/doudou_demo/article/details/49446615

版权

javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

注意：记得导入struts的jar包、json使用的jar包
这里写图片描述
1、网上下载ajaxfileupload.js，如果使用json，记得修改
将【eval( “data = ” + data );】
修改为：【data = jQuery.parseJSON(jQuery(data).text());】
2、jsp页面
引入js文件：

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
//自己建的
<script type="text/javascript" src="js/ajax_upload.js"></script>

内容：

<body>
<!--为了jquery获得basePath的值，必须写（如果没有更好的办法） -->
<input type="hidden" value = "<%=basePath%>" id = "basePath"/>
<!--id是给jquery使用的，name是给后台action使用的，必须和后台的名字相同！！ -->
<input type="file" id="file1" name="upload"/><br/>
<!--上传成功后图片显示的位置 -->
<img id="img1" alt="上传成功" src="" />
<hr/>
<!--上传前在这个输入框中写入值，可以判断是否是异步上传  -->
<input type="text"/>
</body>

3、ajax_upload.js

$(document).ready(function(){
    //解决file的change事件只能执行一次的问题
    $(document).on('change','#file1',function(){
        ajaxFileUpload();
    });
});
//上传图片的方法，
function ajaxFileUpload(){
    //获得basePath
    basePath=$('#basePath').attr("value");
    //调用ajaxfileupload.js中的方法
    $.ajaxFileUpload({
        url:'file_fileUpload.do',//上传图片要提交到的action
        secureuri:false,//是否用安全提交，默认为false
        fileElementId:'file1',//file选择文件的框的id
        dataType:'json',//数据返回格式，如果用json，需要修改ajaxfileupload.js中的内容
        success: function (data){
            //获得json格式数据的值，并转换显示图片在页面上
            $("#img1").attr("src",basePath+data.IDPicPath);
        }
    });
}

4、action

public class Ajax_FileUploadAction {
    //1、使用common.io上传图片，下面的三个属性必须写
    //2、并且upload这个名字必须和页面file中的name相同
    //3、后两个属性名字不要改变
    //4、使用struts，记得写get、set方法
    private File upload;
    private String uploadContentType;
    private String uploadFileName;//上传图片的名字
    public void fileUpload() throws IOException{
        System.out.println("开始上传图片");
        //设置上传的路径
        String IDPicFile = ServletActionContext.getServletContext().getRealPath("/IDPicFile");
        File targetFile=new File(IDPicFile);
        //System.out.println("这是上传图片的路径："+targetFile.getPath());
        if(!targetFile.mkdirs()){
            targetFile.mkdirs();
        }
        targetFile=new File(targetFile,getUploadFileName());
        //将图片文件写入，必须有
        FileUtils.copyFile(upload, targetFile);
        String IDPicPath="IDPicFile/"+uploadFileName;
        System.out.println(IDPicPath);//输出传入页面的值
        //将，要传入页面的数据变成json格式
        JSONObject jsonObject=new JSONObject();
        jsonObject.put("IDPicPath", IDPicPath);
        //控制台输出格式化的json数据
        System.out.println(jsonObject);
        ServletActionContext.getResponse().getWriter().print(jsonObject);
    }
    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;
    }
}

4、struts.xml配置

<struts>
    <!-- 开发模式 -->
    <constant name="struts.devMode" value="false" />
    <!-- Action访问方式 -->
    <constant name="struts.action.extension" value="do,phtml,action"></constant>
    <package name="xdd" namespace="/" extends="struts-default">
        <action name="file_*" class="action.Ajax_FileUploadAction" method="{1}">
        </action>
    </package>
</struts>

5、测试，必须成功！！！！！

doudou_demo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajaxfileupload.js、struts2、ajax、json异步上传图片

注意：记得导入struts的jar包、json使用的jar包 1、网上下载ajaxfileupload.js，如果使用json，记得修改将【eval( “data = ” + data );】修改为：【data = jQuery.parseJSON(jQuery(data).text());】 2、jsp页面引入js文件：<script type="text/ja
复制链接

扫一扫