AngularJS如何上传多部分表单数据和文件?

很棒的编码

我是angular.js的初学者,但是我对基础知识有很好的了解。

我要做的是上传文件和一些表单数据作为多部分表单数据。我读到这不是angular的功能,但是3rd party库可以做到这一点。我已经通过git克隆了angular-file-upload,但是仍然无法发布简单的表单和文件。

有人可以提供如何执行此操作的示例,html和js吗?

Prasad Shinde

首先

  1. 您无需对结构进行任何特殊更改。我的意思是:html输入标签。

<input accept="image/*" name="file" ng-value="fileToUpload"
       value="{{fileToUpload}}" file-model="fileToUpload"
       set-file-data="fileToUpload = value;" 
       type="file" id="my_file" />

1.2创建自己的指令,

.directive("fileModel",function() {
	return {
		restrict: 'EA',
		scope: {
			setFileData: "&"
		},
		link: function(scope, ele, attrs) {
			ele.on('change', function() {
				scope.$apply(function() {
					var val = ele[0].files[0];
					scope.setFileData({ value: val });
				});
			});
		}
	}
})

  1. 在带有$ httpProvider的模块中,添加具有multipart / form-data的依赖项(如Accept,Content-Type等)。(建议是接受json格式的响应)例如:

$ httpProvider.defaults.headers.post ['Accept'] ='application / json,text / javascript'; $ httpProvider.defaults.headers.post ['Content-Type'] ='multipart / form-data; charset = utf-8';

  1. 然后在控制器中创建单独的函数来处理表单提交调用。例如下面的代码:

  2. 在服务函数中,要有目的地处理“ responseType”参数,以便服务器不应抛出“ byteerror”。

  3. transformRequest,用于修改带有附加身份的请求格式。

  4. withCredentials:false,用于HTTP认证信息。

in controller:

  // code this accordingly, so that your file object 
  // will be picked up in service call below.
  fileUpload.uploadFileToUrl(file); 


in service:

  .service('fileUpload', ['$http', 'ajaxService',
    function($http, ajaxService) {

      this.uploadFileToUrl = function(data) {
        var data = {}; //file object 

        var fd = new FormData();
        fd.append('file', data.file);

        $http.post("endpoint server path to whom sending file", fd, {
            withCredentials: false,
            headers: {
              'Content-Type': undefined
            },
            transformRequest: angular.identity,
            params: {
              fd
            },
            responseType: "arraybuffer"
          })
          .then(function(response) {
            var data = response.data;
            var status = response.status;
            console.log(data);

            if (status == 200 || status == 202) //do whatever in success
            else // handle error in  else if needed 
          })
          .catch(function(error) {
            console.log(error.status);

            // handle else calls
          });
      }
    }
  }])
<script src="//unpkg.com/angular/angular.js"></script>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用多部分/表单数据和文件上传时,Spring Webflow-IllegalStateException

来自分类Dev

如何使用发布多部分/表单数据的请求来排列数据和文件的顺序?

来自分类Dev

在Flask中上传文件,无需多部分/表单数据

来自分类Dev

如何使用 org.glassfish.jersey.media.multipart 从 Java 将内容和文件作为多部分表单数据发送?

来自分类Dev

多部分表单数据是如何工作的?

来自分类Dev

HTML.BeginForm多部分/表单数据文件上传表单组验证

来自分类Dev

AngularJS:将照片作为多部分表单数据上传和发布并获得响应

来自分类Dev

AngularJS:将照片作为多部分表单数据上传和发布并获得响应

来自分类Dev

如何访问在多部分/表单数据POST中上传的内容数据?

来自分类Dev

通过图形API上传照片-多部分/表单数据

来自分类Dev

PATCH / PUT不接受多部分/表单数据文件上传吗?

来自分类Dev

使用WSO2 API管理器上传多部分表单数据文件?

来自分类Dev

无法在iOS中使用NSURLSession多部分表单数据上传文件

来自分类Dev

使用Python通过POST多部分表单数据上传文件

来自分类Dev

将文件从AWS Lambda(Python)中的多部分/表单数据上传到S3

来自分类Dev

测试ASP.NET Web API多部分表单数据文件上传

来自分类Dev

使用多部分表单数据上传文件时,我缺少什么?

来自分类Dev

多部分文件上传表单数据附件为空

来自分类Dev

带有Graph API的Android Facebook视频上传-如何使用多部分/表单数据

来自分类Dev

如何在Swift中使用嵌套的JSON参数上传多部分表单数据?

来自分类Dev

如何在多部分/表单数据请求中获取文件的实际文件大小

来自分类Dev

春天开机上传表单数据和文件

来自分类Dev

如何使用Spring MockMvc输入多部分/表单数据?

来自分类Dev

如何使用ServiceStack处理多部分表单数据?

来自分类Dev

如何使用多部分/表单数据发布Facebook照片

来自分类Dev

如何使用多部分/表单数据发布Facebook照片

来自分类Dev

如何在wicket中解析多部分表单数据

来自分类Dev

CGI 脚本如何解码多部分/表单数据

来自分类Dev

Linux命令行工具可以通过HTTP以多部分/表单数据的形式上传文件?

Related 相关文章

  1. 1

    使用多部分/表单数据和文件上传时,Spring Webflow-IllegalStateException

  2. 2

    如何使用发布多部分/表单数据的请求来排列数据和文件的顺序?

  3. 3

    在Flask中上传文件,无需多部分/表单数据

  4. 4

    如何使用 org.glassfish.jersey.media.multipart 从 Java 将内容和文件作为多部分表单数据发送?

  5. 5

    多部分表单数据是如何工作的?

  6. 6

    HTML.BeginForm多部分/表单数据文件上传表单组验证

  7. 7

    AngularJS:将照片作为多部分表单数据上传和发布并获得响应

  8. 8

    AngularJS:将照片作为多部分表单数据上传和发布并获得响应

  9. 9

    如何访问在多部分/表单数据POST中上传的内容数据?

  10. 10

    通过图形API上传照片-多部分/表单数据

  11. 11

    PATCH / PUT不接受多部分/表单数据文件上传吗?

  12. 12

    使用WSO2 API管理器上传多部分表单数据文件?

  13. 13

    无法在iOS中使用NSURLSession多部分表单数据上传文件

  14. 14

    使用Python通过POST多部分表单数据上传文件

  15. 15

    将文件从AWS Lambda(Python)中的多部分/表单数据上传到S3

  16. 16

    测试ASP.NET Web API多部分表单数据文件上传

  17. 17

    使用多部分表单数据上传文件时,我缺少什么?

  18. 18

    多部分文件上传表单数据附件为空

  19. 19

    带有Graph API的Android Facebook视频上传-如何使用多部分/表单数据

  20. 20

    如何在Swift中使用嵌套的JSON参数上传多部分表单数据?

  21. 21

    如何在多部分/表单数据请求中获取文件的实际文件大小

  22. 22

    春天开机上传表单数据和文件

  23. 23

    如何使用Spring MockMvc输入多部分/表单数据?

  24. 24

    如何使用ServiceStack处理多部分表单数据?

  25. 25

    如何使用多部分/表单数据发布Facebook照片

  26. 26

    如何使用多部分/表单数据发布Facebook照片

  27. 27

    如何在wicket中解析多部分表单数据

  28. 28

    CGI 脚本如何解码多部分/表单数据

  29. 29

    Linux命令行工具可以通过HTTP以多部分/表单数据的形式上传文件?

热门标签

归档