bootstrap学习(八):跟着宝哥学java：bootstrap实现文件上传

3.10 文件上传

• 在按钮组中添加文件上传的按钮

<!--添加按钮组-->
<div class="btn-group" role="group">
    <button type="button" class="btn btn-default" id="but_logout">老师登出</button>
    <button type="button" class="btn btn-default" id="but_add">添加学生</button>
    <button type="button" class="btn btn-default" id="but_delete">删除学生</button>
    <button type="button" class="btn btn-default" id="but_add_sphoto">文件上传</button>
</div>

• 创建文件上传的模态框 和 添加学生模态框完全相同 只是多了一个file

<!--文件上传的模态框-->
<div class="modal fade" id="addSphotoModal" tabindex="-1" role="dialog" aria-labelledby="addSphotoModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="addSphotoModalLabel">添加学生(文件上传)</h4>
            </div>
            <div class="modal-body">
                <form id="form_add_sphoto">
                    <div class="form-group">
                        <label class="control-label">学生名字：</label>
                        <input type="text" class="form-control"  name="sname" value="韩梅梅">
                    </div>
                    <div class="form-group">
                        <label class="control-label">学生分数：</label>
                        <input type="text" class="form-control"  name="score" value="19.5">
                    </div>
                    <div class="form-group">
                        <label class="control-label">学生年龄：</label>
                        <input type="text" class="form-control"  name="sage" value="18">
                    </div>
                    <div class="form-group">
                        <label class="control-label">学生生日：</label>
                        <input type="date" class="form-control"  name="sbirth">
                    </div>
                    <div class="form-group">
                        <label class="control-label">学生性别：</label>
                        <label class="radio-inline">
                            <input type="radio" name="sex" value="男" checked> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex"  value="女"> 女
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="control-label">政治面貌：</label>
                        <label class="radio-inline">
                            <input type="radio" name="sdy" value="true" checked> 党员
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sdy"  value="true"> 群众
                        </label>
                    </div>
                    <div class="form-group">
                        <label class="control-label">学生班级：</label>
                        <select class="form-control" name="sclass">
                            <option value="java第1期">java第1期</option>
                            <option value="java第2期">java第2期</option>
                            <option value="java第3期">java第3期</option>
                            <option value="java第4期">java第4期</option>
                            <option value="java第5期">java第5期</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">学生照片：</label>
                        <input type="file" class="form-control"  name="photo">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消添加</button>
                <button type="button" class="btn btn-primary"  id="but_submit_add_sphoto">确认添加(文件上传)</button>
            </div>
        </div>
    </div>
</div>

• 文件上传的js

<!--文件上传的js-->
    <script type="text/javascript">
        $(function(){
        //id="but_add_sphoto"被点击
        $("#but_add_sphoto").bind("click",function(){
            $("#addSphotoModal").modal("show");//添加的模态框显示
        });
        //给id="but_submit_add_sphoto"点击事件
        $("#but_submit_add_sphoto").bind("click",function(){
            //响应json 请求：多部件表单  必须请求方式：post
            //通过js的FormData类 实现表单数据的序列化
            //var formdata=new FormData(form);
            //可以通过append()方法来追加数据formdata.append("name","laotie");
            var formData=new FormData($("#form_add_sphoto")[0]);
            //发送ajax请求
            $.ajax({
                cache:false,
                type:"POST",
                data:formData,
                url:path+"student/sphotoUpload.action",
                contentType:false,//如果请求参数是FormData 必须设置 contentType请求头为false
                processData:false,//如果请求参数是FormData 必须设置 processData请求头为false
                dataType:"json",
                async:false,
                success: function(rv){
                    if(rv.status==200){
                        //添加成功 当前模态框隐藏
                        $("#addSphotoModal").modal("hide");
                        //刷新表格
                        $("#table_student").bootstrapTable("refresh"); //刷新表格
                        return;
                    }
                    alert(rv.errorMessage);
                }
            });
        });
    });
</script>

• action

@PostMapping("/student/sphotoUpload.action")
//@ResponseBody
public ResponseVO<String> addOneConstainsSphotoMethod( @RequestParam("photo") MultipartFile photo,Student student,HttpServletRequest req){
    //获取imgs的路径
    String path=req.getSession().getServletContext().getRealPath("/imgs");//
    String muDiFileName= UUID.randomUUID().toString().replace("-", "")+"_"+photo.getOriginalFilename();
    //获取目的文件
    File muDiFile=new File(path,muDiFileName);
    //实现文件上传
    try {
        photo.transferTo(muDiFile);
    }catch (Exception e){
        throw new StudentCrudException(e.getMessage());
    }
    //添加
    student.setSphoto(muDiFile.getName());
    return new ResponseVO<>(200,null,"修改成功行数："+service.addOneContainsSphotoMethod(student));
}

• dao

@Insert("insert into student(sname,sex,score,sdy,sage,sbirth,sclass,sphoto) values(#{sname},#{sex},#{score},#{sdy},#{sage},#{sbirth},#{sclass},#{sphoto})")
int insertContainsPhoto(Student student);