struts2+ajax图片上传以及jsp页面显示

直接上代码:

上传要引入个ajaxfileupload.js 文件和jquery.js文件

JSP页面代码:

<input type="file" id="file" name="image" />
<input type="button" value="上传" οnclick="ajaxFileUpload();">

<div class="tabRow" id="img" style="height:200px;display:none;margin-left:110px">  
     <p>此div是用来图片上传成功后显示图片用的。。。</p>

</div>


ajaxFileUpload()方法:

function ajaxFileUpload()
    {
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })//开始上传文件时显示一个图片
        .ajaxComplete(function(){
            $(this).hide();
        });//文件上传完成将图片隐藏起来
        
        $.ajaxFileUpload
        (
            {
                url:projectBasePath+"resource/sepcialcolumn!upload",
                secureuri:false,
                fileElementId:'file',//和input的id要一樣
                dataType: 'json',//返回值类型 
                success: function (data)
                {
                    if(data.result==0){
                    alert("上傳成功!");
                    $("#img").css("display","block");
                    $("#img").empty();
                    $("#img").append('<img style="width:70%;height:200px;" src="http://localhost:8080/macaumemorycms/uploads/banner/'+data.message+'" />');
                    }else{
                    alert(data.message);
                    }
                },
                error: function (data, status, e)
                {
                    alert(e);
                }
            }
        )
    }


Action代码:

public class UploadImageAction extends SuperAction{
    private static final long serialVersionUID = 1L;  
    private ServiceResult sResult;
    private File image; //上传的文件  
    private String imageFileName; //文件名称  
    private String imageContentType; //文件类型  

   GET和SET方法........

    public void upload(){  
        String realpath = ServletActionContext.getServletContext().getRealPath("/uploads/banner");  
        System.out.println("realpath: "+realpath);  
        if(image != null){  

    //获取当前时间的时间戳作为文件名,为了数据库更好的管理
            Date date = new Date();
            SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
            String[] contentType=imageContentType.split("/");
            imageFileName=sdf.format(date)+"."+contentType[1];
            File savefile = new File(new File(realpath), imageFileName);  
            if(savefile.getParentFile().exists()){  
                try {  
                    savefile.getParentFile().mkdirs();  
                    FileUtils.copyFile(image, savefile); 
                    SepcialColumnWithBLOBs sep=this.sepcialService.findById(id);
                    sep.setTopBannerUrl(imageFileName);
                    if(!sepcialService.update(sep)){
                    sResult.setResult(-2);
            sResult.setMessage("上傳失敗!");
                    }else{
                    sResult.setMessage(imageFileName);
                    }
                } catch (IOException e) {  
                    e.printStackTrace();  
                }  
            }  
        }  
        writeReturn(sResult); 
    }  
}


效果图:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值