ajax上传图片添加数据到数据库以及数据及图片回显

1.效果图（将数据和图片一起保存到数据库，查询数据时图片进行展示）

2.springboot+easyui写的，将图片上传到resources下面的upload123文件夹中，所以首先应该新建一个文件夹

3.html

<div id="win" class="easyui-dialog" title="班级信息添加"  style="width: 400px; padding: 10px 20px; height: 410px;"
     closed="true" buttons="#dlg-buttons">

    <form id="fm" method="post" action="" style="margin-top: 20px; margin-left: 20px;">
        <div class="fitem">
            <label>贷款人数:</label>
            <input id="dkrs" style="" name="" class="easyui-textbox"  />
        </div>
        <div class="fitem">
            <label>班级名称:</label>
            <input id="bjmc" name="" class="easyui-textbox" />
        </div>
        <div class="fitem">
            <label>班级人数:</label>
            <input id="bjrs" name="" class="easyui-textbox" />
        </div>

        <div class="fitem">
            <label>老师名称:</label>
            <input id="lsmc" name="" class="easyui-textbox"  />
        </div>

        <div class="fitem">
            <label>辅导员名称:</label>
            <input id="fdymc" name="" class="easyui-textbox"  />
        </div>

        <div class="fitem">
            <label>辅导员编号:</label>
            <input id="fdybh" name="" class="easyui-textbox"  />
        </div>
        <div class="fitem">
            <label>辅导员头像:</label>
            <input type="file" name="file_upload2" id = "uplx" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)" >
        </div>
        <div id="Imgdiv" class="fitem">
            <label></label>
            <img id="preview" width="200px" height="200px" placeholder="预览"/>
        </div>
        <!--直接写提交取消的事件不需要在js中绑定-->
        <div id="dlg-buttons" style="display: block">
            <a id="confirm" href="javascript:void(0)" class="easyui-linkbutton c6" iconcls="icon-ok" onclick="Modify()" style="width: 90px">提交</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#win').dialog('close')" style="width: 90px">取消</a>
        </div>
    </form>
</div>

 4.js使用ajax提交数据

//添加数据进行提交
    function Modify(){
    //贷款人数
        var dkrs = $("#dkrs").textbox('getValue')
        //班级名称
        var bjmc = $("#bjmc").textbox('getValue')
        //班级人数
        var bjrs = $("#bjrs").textbox('getValue')
        //老师名称
        var lsmc = $("#lsmc").textbox('getValue')
        //辅导员名称
        var fdymc = $("#fdymc").textbox('getValue')
        //辅导员编号
        var fdybh = $("#fdybh").textbox('getValue')
        var formData = new FormData();
        formData.append('file', $('#uplx')[0].files[0]);  //添加图片信息的参数
        formData.append('dkrs',dkrs);
        formData.append('bjmc',bjmc);
        formData.append('bjrs',bjrs);
        formData.append('lsmc',lsmc);
        formData.append('fdymc',fdymc);
        formData.append('fdybh',fdybh);
         $.ajax({
             type:'post',
             dataType:'json',
             data:formData,
             cache: false, //上传文件不需要缓存
             url:'../../addData',
             processData: false, // 告诉jQuery不要去处理发送的数据
             contentType: false, // 告诉jQuery不要去设置Content-Type请求头
             success:function(data){
                   if(data.success=='ok'){
                       $.messager.alert('提示', '添加数据成功！');
                       window.location.reload();
                   }else{
                       $.messager.alert('提示', '添加数据失败！');
                   }
             }
         })
    }

5.controller代码(上传那部分代码可以提取为工具类)

@ResponseBody
    @RequestMapping("/addData")
    public Map<String,Object> adddata(@RequestParam MultipartFile file,String dkrs ,String bjmc,String bjrs, String lsmc,String fdymc,String fdybh,HttpServletRequest request  ) throws IOException {
    Map<String,Object> map=new HashMap<String,Object>();
    //使用UUID给图片重命名，并去掉四个“-”
    String name = UUID.randomUUID().toString().replaceAll("-", "");
    //获取文件的扩展名
    String ext = FilenameUtils.getExtension(file.getOriginalFilename());
    //设置图片上传路径
    //获取项目根路径下面自己新建的upload123文件夹，用于存储图片
    String url = request.getSession().getServletContext().getRealPath("/upload123");
    File filex=new File(url);
    if(!filex.exists()){
        filex.mkdir();
    }
    //以绝对路径保存重名命后的图片
    file.transferTo(new File(url+"/"+name + "." + ext));
    //把图片存储路径保存到数据库
     String urlxxx="upload123/"+name + "." + ext;

    int i=dataShowService.insertIntoTable(dkrs,bjmc,bjrs,lsmc,fdymc,fdybh,urlxxx);
    if(i>0){
        map.put("success","ok");
        map.put("msg","添加成功");
    }else{
        map.put("msg","添加失败");
    }
        return map;
}

6.到此为止数据添加和将图片添加数据库已经完成，显示图片时其实就是将数据库中的路径查询出来在前台展示，所以下面就是展示了（实例使用easyui）

<table id="dgs" title="文章管理" class="easyui-datagrid" fitColumns="true" pagination="true"
       toolbar="#tb" rownumbers="true">
    <thead>
    <tr>
        <th field="idx" checkbox="true"  class="chj" align="center"></th>
        <!--<th field="tid" width="20" align="center" hidden="true"></th>-->
        <th data-options="field:'image',width:40, formatter: imgFormatter">辅导员头想</th>
    </tr>
    </thead>
</table>

主要讲解图片这一栏:下面是js代码

function imgFormatter(value,row,index){
    debugger
    if('' != value && null != value)
        value = '<img style="width:30px; height:30px" src="' + value + '" >';
    return  value;
}