Question

我正在使用ng-file-upload将文件发送到server.ng-file-upload与上传文件完美配合。我正在使用最新的Chrome浏览器。

示例代码段

在文件输入中选择文件时，文件会上传到服务器。但我想要的是，当单击提交按钮和其他表单数据时，文件（选定文件数组）应仅上传到服务器。

泽西岛REST服务

    @POST
    @Path("/manual")
    @Consumes(MediaType.MULTIPART_FORM_DATA)
    @Produces(MediaType.APPLICATION_JSON)
    public boolean insertResults(@FormDataParam("file") InputStream uploadedInputStream,@FormDataParam("file") FormDataContentDisposition fileDetail,@FormDataParam("username") String username) throws IOException {

        System.out.println(username);

        StringWriter writer = new StringWriter();
        IOUtils.copy(uploadedInputStream, writer,"UTF-8");
        String theString = writer.toString();
        System.out.println(theString);

            return Boolean.TRUE;

}

我是AngularJs的新手，请帮助我克服这个问题。

Answer 1

根据documentation on the site以及我期望的内容 - 您可以将上传功能附加到按钮并在您执行任何其他功能时触发它。这是关于ng-file-upload的GitHub文档的一个例子：

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
    // upload later on form submit or something similar
    $scope.submit = function() {
      if (form.file.$valid && $scope.file) {
        $scope.upload($scope.file);
      }
    };

    // upload on file select or drop
    $scope.upload = function (file) {
        Upload.upload({
            url: 'upload/url',
            data: {file: file, 'username': $scope.username}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };
    // for multiple files:
    $scope.uploadFiles = function (files) {
      if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
          Upload.upload({..., data: {file: files[i]}, ...})...;
        }
        // or send them all together for HTML5 browsers:
        Upload.upload({..., data: {file: files}, ...})...;
      }
    }
}]);

在这里，您可以看到他在调用表单$ scope.submit时调用$ scope.upload函数，而且他甚至在调用上传之前检查表单是否有效。

Answer 2

我决定写一个关于如何将多个文件发送到后端并逐个访问文件详细信息的描述性答案。互联网上缺乏关于此的信息性答案，所以这个答案可能对某人有用。要发送AngularJs中的多个文件后端你可以使用ng-file-upload API。你可以在提交按钮点击时发送文件，如上面提到的答案。让我们假设你的前端工作正常，可以发送文件到服务器。所以你们大多数人都有如果它是一个多部分表单数据，那么对如何操作文件和其他细节表示怀疑。这就是如何操作表单数据的方法。

服务器端收到的数据如下所示。

示例文件数据以及其他表单属性

{files[0]=[org.glassfish.jersey.media.multipart.FormDataBodyPart@40ce14c9],files[1]=[org.glassfish.jersey.media.multipart.FormDataBodyPart@40ce14c9],userName=sam}

REST端点（使用Jersey）来填充多部分表单数据

  @POST
  @Consumes(MediaType.MULTIPART_FORM_DATA)
  public void upload(FormDataMultiPart formParams){

    Map<String, List<FormDataBodyPart>> fieldsByName =   formParams.getFields();

       for (List<FormDataBodyPart> fields : fieldsByName.values()) {
            for (FormDataBodyPart field : fields){

 // Check if fields are files(If any one knows better solution to check files[] please share your answers)

                if (StringUtils.equals("files",
                  StringUtils.substringBefore(field.getName(), "["))) {

                    //To read file content
                    InputStream is = field.getEntityAs(InputStream.class);
                    String fileName = field.getName();
                    field.getMediaType();//File mimeType

                    //To get file details like size,file name,etc
                    FormDataContentDisposition f=field.getFormDataContentDisposition();
                    System.out.println(f.getFileName());

    Note: f.getType() not return the actual file type it returns mime type as   form-data to get actual mime type use FormDataBodyPart media type like above.
     }

    get other form data like user name

  else if(StringUtils.equals(field.getName(),"userName")){

          System.out.println(field.getValue());
       }
     }
   }
 }

如何在AngularJs中单击提交按钮时发送所选文件列表

2 个答案: