频道导航

Angularjs文件上传

2020-08-12 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了Angularjs文件上传，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_404_0@

<form method='POST' enctype='multipart/form-data' name="formName">
        <div class="row">
            <div class="col-md-6">
                <input type="file" style="text-align: left" ng-model="value" class="btn"/>   
            </div>
            <div class="col-md-2">
                <input type="submit" value="upload" class="btn btn-info" ng-click="submitFile()"/>
            </div>
        </div>
    </form>

AngularJs

$scope.submitFile = function(){
    document.formName.action = 'http://xxx.xxx.xxx.xxx:8000/ww/up?s=' + $rootScope.reply.Sid; //$rootScope.reply.Sid is secession id
    document.formName.submit();
};

我正在尝试使用AngularJs进行文件上载.这个逻辑会起作用吗？我选择的路径也如下所示.

C:\fakepath\license.txt

这是一个错误吗？

注意：
我们的UI团队能够使用以下代码进行文件上传.我试图在AngularJs中获得同样的东西

<body>
    <form method='POST' enctype='multipart/form-data' action="http://xxx.xxx.xx.xxx:xxxx/yyy/yyyyyyyyy?s=3e3646ea-48cc-4342-a388-e0c0d7bbf4e4"/'>
    File to upload: <input type=file id='up_file' name=upfile><br>
</body>

解决方法

你做对了..你只需改变一些东西就可以了

更改

<form method='POST' enctype='multipart/form-data' name="formName">

至

<form action="{{action}}" method='POST' enctype='multipart/form-data' name="formName">

在控制器中注入$timeout以及$scope

app.controller('Test',function($scope,$rootScope,$timeout){

 $scope.submitFile = function(){
  $scope.action = 'http://xxx.xxx.xxx.xxx:8000/ww/up?s=' + $rootScope.reply.Sid;

  $timeout(function(){
   document.formName.submit();
  },100);

 }

});

使用新数据分配$scope.action的动作.. angularjs需要更新dom ..这就是我们使用$timeout并提交表单的原因

@H_404_0@