Webuploader 上传图片与form表单（二）

上一次通过formData来上传图片与相关信息给服务器，这一次通过接受服务端json响应来完成form表单的提交。

通过查看webuploader官网文档，我们可以找到如下方法 

其中data就是服务段传递给我们的数据，我们可以通过data来设置图片存储的路径信息等。

1 后台将图片信息向数据库提交，同时向前端发送json响应

@RequestMapping(value="/add.do",method=RequestMethod.POST)
    public @ResponseBody AjaxResult addSubmit(String username,@RequestParam("img") String img) {
        if(username==""|| img=="") {
            return new AjaxResult("error","参数不能为空");
        }
        Coach coach=new Coach();
        coach.setImg(img);
        coach.setName(username);

        if(coachService.insert(coach)>0) {
            return new AjaxResult("ok", "ok");
        };

         return new AjaxResult("error","数据库出错");
    }

AjaxResult是我自己定义的一个类，用来记录返回信息

public class AjaxResult {

    private String status; //表示响应状态，规定"success"表示成功，"error"表示失败
    private Object data; //表示响应信息，既可以是提示信息，也可以是json格式的对象数据

    public AjaxResult() {

    }

    public AjaxResult(String status, Object data) {
        this.status = status;
        this.data = data;
    }

    public static AjaxResult errorInstance(Object data) {
        return new AjaxResult("error", data);
    }

    public static AjaxResult successInstance(Object data) {
        return new AjaxResult("success", data);
    }

    public String getStatus() {
        return status;
    }

    public void setStatus(String status) {
        this.status = status;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }

}

我们通过ajaxresult中的data来记录图片信息。并传递给前端。

2 我们使用uploadAccept来接受服务段传回的信息

 uploader.on('uploadAccept',function(object,ret){

            if(ret.status=='1'){
                $("#imgSrc").attr('value',ret.data);

                return true;
            }
        } );

这个ret是接受我服务器端的返回值，ret.status 是判断是否成功，ret.data 是记录的图片信息，“#imgSrc”是我在表单设置的一个隐藏id用来记录上传图片的信息。

2 使用ajax提交表单信息

$("#btnClick").click(function(){
        var username=$("#username").val();

        var img=$("#imgSrc").val();

        $.ajax({
            type:"post",
            url:"<%=ctxPath%>/Coach/add.do",
            data:{username:username,img:img},
            success:function(res){
                if(res.status=="ok"){

                    location.reload();
                }else{
                    alert(data);
                }
            },
            error:function(){
                alert("error error");
            }
        });
    });

username是表单user的值，在获取到username和imgSrc的值后，就通过ajax方式提交给服务器将图片和表单信息的记录到数据中，提交给服务器代码我就不介绍了，如果有问题可以和我讨论。