SpringMVC---文件上传

SpringMVC—文件上传

1. 普通上传(图片)
2. Ajax上传(及时显示图片)
3. 拓展—上传至外网(推荐)

课前准备

配置文件Springmvc.xml配置文件解析器：

 <!--文件解析器    -->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="10485760"></property> <!--设置上传最大大小 当前为10mb(1024*1024*10)-->
    </bean>

导入文件上传包

<!--    文件上传-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.3.1</version>
    </dependency>

普通上传

实现类

@RequestMapping("/upload")
    //普通上传
    public String upload(HttpServletRequest req, MultipartFile[] upload) throws IOException {
        //将文件存到项目发布位置
        //表单  文件域名upload    ----    方法参数upload
        String path=req.getRealPath("/img/");
        System.out.println(path);
        //文件保存
        for(MultipartFile file:upload) {
            String fname=file.getOriginalFilename();//获取文件名
            file.transferTo(new File(path,fname));
        }
        return "success";
    }

jsp显示页

    <h1>普通文件上传</h1>
    <form action="upload" method="post" enctype="multipart/form-data">
        <input type="file" name="upload" />
        <input type="submit" value="上传">
    </form>

注: file文本框的name要与实现类的MultipartFile[] 的属性名相同

Ajax上传

实现类(这里用的是另一种方法)

@RequestMapping("/ajaxupload")
    @ResponseBody
    //ajax上传
    public String ajaxupload(HttpServletRequest req) throws IOException {
        req.setCharacterEncoding("UTF-8");
        MultipartHttpServletRequest mreq = (MultipartHttpServletRequest)req;
        MultipartFile file = mreq.getFile("file");
        String fileName = file.getOriginalFilename();
        String name=req.getRealPath("/img/")+"/"+fileName;
        System.out.println(name);
        FileOutputStream fos = new FileOutputStream(name);
        fos.write(file.getBytes());
        fos.flush();
        fos.close();
        return fileName;
    }

jsp显示页

<h1>ajax文件上传</h1>
<input type="file" name="upload" onchange="imageUpload(this)" class="form-control" placeholder="点击按钮选择图片"id="pictureUpload">
<img src="" id="toux">

文件文本框改变事件js:

<script>
        function imageUpload(obj) {
            //判断图片格式
            var fileName=obj.value;
            var suffixIndex=fileName.lastIndexOf(".");
            var suffix=fileName.substring(suffixIndex+1).toUpperCase();
            if(suffix!="BMP"&&suffix!="JPG"&&suffix!="JPEG"&&suffix!="PNG"&&suffix!="GIF"){
                alert( "请上传图片（格式BMP、JPG、JPEG、PNG、GIF等）!");
                var file = $("#pictureUpload");
                file.after(file.clone().val(""));
                file.remove();
                return;
            }

            var formData = new FormData();
            formData.append('file', $('#pictureUpload')[0].files[0]);  //添加图片信息的参数
            $.ajax({
                type: "POST",
                url: "ajaxupload",
                data:formData,
                cache: false, //上传文件不需要缓存
                processData: false,// 告诉jQuery不要去处理发送的数据
                contentType: false,// 告诉jQuery不要去设置Content-Type请求头
                encType:"multipart/form-data",
                success: function(data) {
                    alert(data)
                    $("#toux").attr("src",'./img/'+data);
                }
            });

        }
    </script>

记得要引入jquery
效果图:

拓展—上传至别人的网站上

小编推荐:七牛云
每月免费10g文件存储,其他的不用管,重要的是免费免费免费…
如何上传请参考官方文档---------java上传