上传图片文件到服务器

image.png

HTML部分：

现在有一个table，table的第一个td中是一个图片上传的input框

<td id="iconTd" rowspan="4" style="background-image: url('<%=basePath%>/static/images/niu.jpg');
        background-size: 100% 100%">
    <input type="file" id="file" name="imgFile" accept="image/jpeg,image/jpg,image/png" onchange="showIncon(this)">
</td>

td的背景图片放置一张默认图片，这里我放了一张牛的图片

input框中添加属性accept="image/jpeg,image/jpg,image/png"来限制只能上传这三种格式的图片文件，想要添加更多类型可以自行百度相关的MIME格式添加进去

input框添加了onchange方法，图片更换时被调用

table是放在一个form中的,form的属性如下：

<form id="stuForm" method="post" enctype="multipart/form-data" action="<%=basePath%>/student/addStudent">

form一定要设置enctype="multipart/form-data"

CSS部分：

这里我为input框添加了样式{opacity:0;width:100%;height:100%}，既实现了input上传文件按钮的隐藏，又可以点击整个td区域都能弹出上传窗口

JS部分

showIncon(file)方法：

function showIncon(file){
    var r= new FileReader();
    //由于jQuery对象没有 files 属性，此处要使用原生js获取，或者$("#file")[0].files;
    f = document.getElementById('file').files[0];
    //限制上传图片大小在2M以内，超过2M则显示默认图片，并清空input框的值
    if(f.size>2048000){
        alert( "请上传小于2M的图片");
        $("#iconTd").css("background-image","url('<%=basePath%>/static/images/niu.jpg')");
        file.value = "";
    }else{
        r.readAsDataURL(f);
        r.onload=function  (e) {
            $("#iconTd").css("background-image","url(" + this.result + ")");
        };
    }
}

上传到服务器上：

表单提交后进入后台，Controller部分：

@RequestMapping(value="student/addStudent",method = RequestMethod.POST)
@ResponseBody
public String addStudent(HttpServletRequest req, Model model) throws IOException {

    //图片上传到服务器
    CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(
            req.getSession().getServletContext());
    commonsMultipartResolver.setDefaultEncoding("utf-8");
    MultipartHttpServletRequest multipartRequest = commonsMultipartResolver
            .resolveMultipart(req);
    MultipartFile multipartFile = multipartRequest.getFile("imgFile");
    //获取绝对路径 并在指定相应目录创建File对象
    String contextPath = req.getSession().getServletContext().getRealPath("/");
    String fileName = "xxx.jpg";
    File imgFile = new File(contextPath+"/static/images/"+fileName);
    //上传文件
    multipartFile.transferTo(imgFile);

    return "要跳转的路径";
}