码迷,mamicode.com
首页 > 编程语言 > 详细

SpringMVC图片上传

时间:2018-01-14 10:55:00      阅读:195      评论:0      收藏:0      [点我收藏+]

标签:ado   html   mda   let   htm   button   dpi   utils   home   

一.form表单提交

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
       <form action="/user/moreupload.action" method="post" enctype="multipart/form-data">
             <input type="text" name="wenben" value=""/><br>
             <input type="file" name="file" /><br>
             <input type="file" name="file" /><br>
             <input type="submit" value="文件上传" />
       </form>

</body>

</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
@RequestMapping("/user")
@Controller
public class duowenjianshangchuan {

    /**
     * file:传入的参数名称 MultipartFile:上传文件的对象,它会标识文件的类型。
     *
     * @param multipartFile
     * @return String : 返回简写视图名称
     * @throws Exception
     */
     //第一种方法:这个是多文件上传,如果是一个文件的话,就
    @RequestMapping("/moreupload")
    public String upload(@RequestParam("file") MultipartFile[] multipartFile, HttpServletRequest request)
            throws Exception {

        String string = request.getParameter("wenben");
        System.out.println(string);

        for (MultipartFile myfile : multipartFile) {
            if (myfile.isEmpty()) {
                System.out.println("文件未上传");
            } else {
                System.out.println("文件长度: " + myfile.getSize());
                System.out.println("文件类型: " + myfile.getContentType());
                System.out.println("文件名称: " + myfile.getName());
                System.out.println("文件原名: " + myfile.getOriginalFilename());
                System.out.println("========================================");
                // 如果用的是Tomcat服务器,则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\WEB-INF\\upload\\文件夹中
                String realPath = request.getSession().getServletContext().getRealPath("/WEB-INF/upload");
                System.out.println("上传到tomcat服务器的地址" + realPath);
                // 这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉,我是看它的源码才知道的
                // FileUtils.copyInputStreamToFile(myfile.getInputStream(), new File(realPath,
                // myfile.getOriginalFilename()));
            }
        }

        return "redirect:/html/success.html";
    }



     //第二种方法,没有在方法的参数里面写 @RequestParam("file") MultipartFile[] multipartFile
    @RequestMapping("/moreupload2")
    public String upload2(HttpServletRequest request) throws Exception {
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        List<MultipartFile> files = multiRequest.getFiles("file");
        for (int i = 0; i < files.size(); i++) {
            System.out.println(files.get(i).getOriginalFilename());
        }

        return "redirect:/html/success.html";
    }

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

二.ajax异步提交(H5 FormDate)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传图片</title>
    <script src="/jquery-3.2.1.js"></script>

</head>
<body>

<div>
    <input type="file" class="easyui-linkbutton" id="excelFile" name="excelFile" size="20" maxlength="20"/>
    <input type="button" class="easyui-linkbutton" id="upload" style="width:80px" value="上传" />
</div>



</body>
<script>
    $(document).ready(function(){

        function ajaxFileUpload(){
            var formData = new FormData();
            formData.append(‘file‘,$("#excelFile")[0].files[0]);    //将文件转成二进制形式
            $.ajax({
                type:"post",
                url:"http://localhost:8080/fileupload",
                async:false,
                contentType: false,    //这个一定要写
                processData: false, //这个也一定要写,不然会报错
                data:formData,
                dataType:‘text‘,    //返回类型,有json,text,HTML。这里并没有jsonp格式,所以别妄想能用jsonp做跨域了。
                success:function(data){
                    alert(data);
                },
                error:function(XMLHttpRequest, textStatus, errorThrown, data){
                    alert(errorThrown);
                }
            });
        }

        $("#upload").click(function(){
            ajaxFileUpload();
        });
    });
</script>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
@RequestMapping(value="fileupload", method=RequestMethod.POST,produces="text/html;charset=utf-8")
    public void addPic(HttpServletResponse response,HttpServletRequest request,
                       @RequestParam(value="file", required=false) MultipartFile file) throws IOException{
        System.out.println(file.getOriginalFilename());
        response.getWriter().write("success");
        response.setHeader("Access-Control-Allow-Origin", "*");
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

三.参考

https://www.cnblogs.com/emperorking/articles/6396956.html

SpringMVC图片上传

标签:ado   html   mda   let   htm   button   dpi   utils   home   

原文地址:https://www.cnblogs.com/rainbowpang/p/8282342.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!