使用 AngularJS 和 Spring Rest 拖放文件上传答案

【问题标题】：Drag Drop file upload with AngularJS and Spring Rest使用 AngularJS 和 Spring Rest 拖放文件上传
【发布时间】：2015-04-10 20:51:56
【问题描述】：

我有 angularjs 和 spring rest 文件上传它工作得很好，但我需要将 html 文件中的文件上传更改为 dropzone.js 或任何拖放文件上传，我尝试了 dropzone.js 库但我无法将它与 angular 集成,谁能帮我怎么办？

Angularjs 控制器

   $scope.document = {};
   $scope.setTitle = function(fileInput) {
   var file=fileInput.value;
   var filename = file.replace(/^.*[\\\/]/, '');
   var title = filename.substr(0, filename.lastIndexOf('.'));
   $("#title").val(title);
   $("#title").focus();
   $scope.document.title=title;
 };


 $scope.uploadFile=function(){
        var formData=new FormData();
        formData.append("file",file.files[0]);
        $http.post('/app/newDocument', formData, {
            transformRequest: function(data, headersGetterFunction) {
                return data;
            },
            headers: { 'Content-Type': undefined }
            }).success(function(data, status) {                       
                console.log("Success ... " + status);
            }).error(function(data, status) {
                console.log("Error ... " + status);
            });
  };
 });

html表单

  <form ng-submit="uploadFile()" class="form-horizontal"
              enctype="multipart/form-data">
 <input type="file" name="file" ng-model="document.fileInput" id="file" />
 <input type="text" class="col-sm-4" ng-model="document.title" id="title" />
    </form>

休息控制器

@RequestMapping(value="/newDocument", method = RequestMethod.POST)
    public void UploadFile(MultipartHttpServletRequest request,
   HttpServletResponse response) throws IOException {

        Attachment attachment=new Attachment();
        Iterator<String> itr=request.getFileNames();
        MultipartFile file=request.getFile(itr.next());
        String fileName=file.getOriginalFilename();
        attachment.setName(fileName);
        File dir = new File("D:\\file");
         if (dir.isDirectory())
         {
            File serverFile = new File(dir,fileName);
           BufferedOutputStream stream = new BufferedOutputStream(
                 new FileOutputStream(serverFile));
           stream.write(file.getBytes());
           stream.close();
       }else {
        System.out.println("not");
      }

 }

【问题讨论】：

标签： java javascript jquery angularjs spring

【解决方案1】：

我个人会使用一个专门的指令，例如优秀的：

https://github.com/danialfarid/angular-file-upload https://github.com/flowjs/ng-flow

这些处理样板代码，让您专注于样式化和创建与您的 API 同步工作的上传服务。

【讨论】：