如何AngularJs提交按钮点击发送时选择的文件列表

本文介绍了如何AngularJs提交按钮点击发送时选择的文件列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用 NG-文件上传来发送文件给server.ng-文件上传工作完全与上传文件一个接one.I正在使用最新的Chrome浏览器。

样品code段

的jsfiddle

在当文件的文件input.But我想要在被选择那里的文件被上传到服务器是文件（已选择文件数组）应当提交按钮与其他形式的数据一起点击上传只给服务器。

新泽西REST服务

@POST    @Path（/手动）    @Consumes（MediaType.MULTIPART_FORM_DATA）    @Produces（MediaType.APPLICATION_JSON）    公共布尔insertResults（@FormDataParam（文件）的InputStream uploadedInputStream，@ FormDataParam（文件）FormDataContentDisposition fileDetail，@ FormDataParam（用户名）字符串用户名）抛出IOException异常{        的System.out.println（用户名）;        StringWriter的作家=新的StringWriter（）;        IOUtils.copy（uploadedInputStream，作家，UTF-8）;        串theString = writer.toString（）;        的System.out.println（theString）;            返回Boolean.TRUE;}

我是新来AngularJs东西，请帮我解决这个问题。

解决方案

我决定写关于如何发送文件倍数由one.There到后端和访问文件的详细信息提供一个描述性的答案是缺乏翔实的答案都在对此所以这个答案也许someone.To很有帮助互联网发送多个文件中AngularJs到后端，您可以使用的 NG-文件上传 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端点（使用泽西岛），以manupulate多部分表单数据

@POST  @Consumes（MediaType.MULTIPART_FORM_DATA）  公共无效上传（FormDataMultiPart formParams）{    地图＆LT;字符串列表＆LT; FormDataBodyPart＆GT;＆GT; fieldsByName = formParams.getFields（）;       对于（列表＆LT; FormDataBodyPart＆GT;字段：fieldsByName.values​​（））{            对于（FormDataBodyPart场：场）{ //检查字段文件（如果有任何人知道更好的解决办法来检查文件[]请分享你的答案）                如果（StringUtils.equals（文件，                  StringUtils.substringBefore（field.getName（），[）））{                    //读取文件内容                    InputStream为= field.getEntityAs（InputStream.class）;                    字符串文件名= field.getName（）;                    field.getMediaType（）; //文件mime类型                    //获取文件的细节，如大小，文件名等                    FormDataContentDisposition F = field.getFormDataContentDisposition（）;                    的System.out.println（f.getFileName（））;    注：f.getType（）不会返回它返回的MIME类型表格数据来获得实际的MIME类型使用FormDataBodyPart媒体类型像上面的实际文件类型。     }    得到这样的用户名其他形式的数据  否则如果（StringUtils.equals（field.getName（），userName的））{          的System.out.println（field.getValue（））;       }     }   } }

I am using ng-file-upload to send files to server.ng-file-upload worked perfectly with upload file one by one.I am using latest chrome browser.

Sample code snippet

jsfiddle

in there files are uploaded to the server when files are selected in the file input.But what i want is that files (selected file array) should be uploaded only to the server when submit button is clicked along with other form data.

Jersey REST service

@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; }

I am new to AngularJs stuff please help me to overcome this problem.

解决方案

I have decided to write a descriptive answer about how to send multiples files to back end and access file details one by one.There are lack of informative answers are on the internet regarding this so this answer maybe helpful for someone.To send multiple files in AngularJs to back end you can use ng-file-upload API.You can send files when submit button click like above mentioned answer.Let assume your front end is working perfectly and can send files to server.So most of you have doubt about how to manipulate files and other details if it is a multipart form data.Here is the way how to manipulate form data.

Server end received data something like below.

Sample files data along with other form attributes

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

REST endpoint(using Jersey) to manupulate multipart form data

@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()); } } } }