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

我正在使用将文件发送到服务器。ng-file-upload可以完美地逐个上载文件。我正在使用最新的chrome浏览器

示例代码片段

在这里，当在文件输入中选择文件时，文件将上载到服务器。但我想要的是，只有在单击提交按钮以及其他表单数据时，文件（选定的文件数组）才应上载到服务器

球衣休息服务

    @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新手，请帮助我解决这个问题。

根据我的预期，您可以将上传功能附加到按钮上，并像执行任何其他功能一样触发它。这是关于ng文件上载的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}, ...})...;
      }
    }
}]);

app.controller（'MyCtrl'，['$scope'，'Upload'，函数（$scope，Upload）{
//稍后在表单提交或类似内容上上载
$scope.submit=函数（）{
if（form.file.$valid&&$scope.file）{
$scope.upload（$scope.file）；
}
};
//在文件上上载选择或删除
$scope.upload=函数（文件）{
上传({
url:“上传/url”，
数据：{file:file，‘username’：$scope.username}
}).然后（功能（resp）{
console.log（'Success'+resp.config.data.file.name+'upload.Response:'+resp.data）；
}，功能（resp）{
console.log（'错误状态：'+响应状态）；
}，函数（evt）{
var progressPercentage=parseInt（100.0*evt.loaded/evt.total）；
log（'progress:'+progressPercentage+'%'+evt.config.data.file.name）；
});
};
//对于多个文件：
$scope.uploadFiles=函数（文件）{
if（files&&files.length）{
对于（var i=0；i

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

根据和我所期望的，您可以将upload函数附加到按钮上，并像执行任何其他函数一样触发它。这是关于ng文件上载的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}, ...})...;
      }
    }
}]);

app.controller（'MyCtrl'，['$scope'，'Upload'，函数（$scope，Upload）{
//稍后在表单提交或类似内容上上载
$scope.submit=函数（）{
if（form.file.$valid&&$scope.file）{
$scope.upload（$scope.file）；
}
};
//在文件上上载选择或删除
$scope.upload=函数（文件）{
上传({
url:“上传/url”，
数据：{file:file，‘username’：$scope.username}
}).然后（功能（resp）{
console.log（'Success'+resp.config.data.file.name+'upload.Response:'+resp.data）；
}，功能（resp）{
console.log（'错误状态：'+响应状态）；
}，函数（evt）{
var progressPercentage=parseInt（100.0*evt.loaded/evt.total）；
log（'progress:'+progressPercentage+'%'+evt.config.data.file.name）；
});
};
//对于多个文件：
$scope.uploadFiles=函数（文件）{
if（files&&files.length）{
对于（var i=0；i

---

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

我决定写一个描述性的答案，说明如何将多个文件发送到后端并逐个访问文件详细信息。缺少信息性答案在互联网上有关于这个问题的信息，所以这个答案可能对某些人有帮助。要用AngularJs向后端发送多个文件，你可以使用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());
       }
     }
   }
 }

@POST
@使用（MediaType.MULTIPART\u FORM\u数据）
公共无效上载（FormDataMultiPart formParams）{
Map fieldsByName=formParams.getFields（）；
for（列表字段：fieldsByName.values（））{
for（FormDataCodePart字段：字段）{
//检查字段是否为文件（如果有人知道检查文件的更好解决方案[]，请分享您的答案）
如果（StringUtils.equals）（“文件”，
StringUtils.substringBefore（field.getName（），“[”））{
//读取文件内容
InputStream is=field.getEntityAs（InputStream.class）；
字符串文件名=field.getName（）；
field.getMediaType（）；//文件mimeType
//获取文件详细信息，如大小、文件名等
FormDataContentDisposition f=field.getFormDataContentDisposition（）；
System.out.println（f.getFileName（））；
注意：f.getType（）不返回实际的文件类型。它将mime类型作为表单数据返回，以获取实际的mime类型。请使用上述FormDataCodePart媒体类型。
}
获取其他表单数据，如用户名
else if（StringUtils.equals（field.getName（），“userName”））{
System.out.println