美文网首页
SpringMvc+Angularjs 多文件批量上传

SpringMvc+Angularjs 多文件批量上传

作者: 油油011 | 来源:发表于2017-03-23 15:25 被阅读0次

    SpringMvc代码

    jar包

    • commons-fileupload

    • commons-io

    spring-mvc.xml配置

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="UTF-8" />
    </bean>
    

    Controller

    @RequestMapping(value = "api/v1/upload", method = RequestMethod.POST, produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody
    public Map upload (@RequestParam(value = "files") MultipartFile [] files,
                                     @RequestParam(value = "id") String id,
                                     HttpServletRequest request, HttpServletResponse response) {
        Map res = new HashMap();
        try {
            log.info("upload>>>>>id:{}", id);
            if (files!=null) {
                for (MultipartFile file:files) {
                    log.info("filename:{}", file.getOriginalFilename());
                }
            }
        } catch (Exception e) {
            log.error("upload>>>>异常:{}", e.toString());
        }
        log.info("upload>>>>返回结果:{}", res);
        return res;
    }
    

    保存到本地

     // copy File
     public boolean copyFile (MultipartFile tempFile, String filePath) {
         Boolean res = false;
    
         try {
             File file = new File(filePath);
             if (!file.getParentFile().exists()) {
                 file.getParentFile().mkdirs();
             }
             // 将文件拷贝到当前目录下
             tempFile.transferTo(file);
             res = true;
         } catch (Exception e) {
             log.info("copyFile>>>>异常:{}", e.toString());
         }
         return res;
     }
    

    AngularJs代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
    <div ng-app="myApp" ng-controller="uploadCtrl">
        <p><input type="file" multiple="multiple" name="files"></p>
        <p><input type="text" name="id" ng-model="id"></p>
        <p><input type="button" value="提交" ng-click="submit()"></p>
    </div>
    
    <script>
        var app = angular.module('myApp', []);
        app.controller('uploadCtrl', ["$scope", "$http", function($scope, $http) {
            $scope.submit = function () {
                var fd = new FormData();
                var files = document.querySelector('input[name="files"]').files;
                for (var i=0; i<files.length; i++) {
                    fd.append("files", files[i]);
                }
                fd.append("id", $scope.id);
                $http({
                    method:'POST',
                    url   : '/Project/api/v1/upload',
                    data: fd,
                    headers: {'Content-Type':undefined},
                    transformRequest: angular.identity
                }).success(function (response) {
                    console.log(response.data);
                }).error(function () {
    
                });
            }
        }]);
    </script>
    
    </body>
    </html>
    

    Form表单提交

    <form action="/Project/api/v1/upload" method="POST" enctype="multipart/form-data">
        <p><input type="text" name="id" /></p>
        <p><input type="file" multiple="multiple" id="files" name="files" /></p>
        <p><input type="submit" value="Submit" /></p>
    </form>
    

    相关文章

      网友评论

          本文标题:SpringMvc+Angularjs 多文件批量上传

          本文链接:https://www.haomeiwen.com/subject/tbaznttx.html