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

Question

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

示例代码片段

在文件中选择文件时，文件会上传到服务器 input.But 我想要的是，当提交按钮被点击时，文件（选定的文件数组）应该只上传到服务器其他表格数据。

泽西 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 和我的预期 - 您可以将上传功能附加到按钮并像执行任何其他功能一样触发它。这是 GitHub 文档中关于 ng-file-upload:

的示例

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

我决定写一篇关于如何将多个文件发送到后端并通过 one.There 访问文件详细信息的描述性答案，互联网上缺乏关于此的信息性答案，所以这个答案可能对someone.To 将 AngularJs 中的多个文件发送到后端你可以使用 ng-file-upload API.You 可以像上面提到的那样在提交按钮单击时发送文件 answer.Let 假设你的前端是工作完美，可以将文件发送到 server.So 如果它是一个多部分表单，你们中的大多数人对如何操作文件和其他细节有疑问 data.Here 是如何操作表单数据的方式。

服务器端收到如下数据。

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

{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 中单击提交按钮时如何发送选定的文件列表

How to send selected file list when submit button click in AngularJs

java

angularjs

jersey

ng-file-upload