Question

我正在使用concat

在mvc-5中创建一个网络应用

这里我有以下div

angularjs

这是我的div

<div class="row form-clearify" style="margin-top:3px;">
    <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:whitesmoke;">
       <label>Upload Your Photo</label>
       <input type="file" ng-model="mdphoto" class="form-control" />
    </div>
    </div>
    <div class="row form-clearify" style="margin-top:3px;">
    <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:whitesmoke;">
        <label>Login Id</label>
        <input type="text" class="form-control" ng-change="filepath()" ng-model="mdlogin" />
    </div>
    </div>

此输入字段将打开我的文件对话框和ng-change =＆＃34; filepath（）＆＃34; id做了以下编码

<input type="file" ng-model="mdphoto" class="form-control" />

我正在打印来自我的文件对话框的数据（我想要文件的网址）

但未定义是在我的网页（控制台）上打印

我需要做的是，我想要所选文件的文件路径（带文件名）

Answer 1

AngularJs中的输入类型文件存在问题。 https://github.com/angular/angular.js/issues/1375

尝试为输入类型文件创建自己的指令：请参阅解决方案 -

ng-model not working with file input

Answer 2

我有同样的问题，并在S.O.上找到了一些好的答案。您需要使用指令将文件绑定到ng-model。这是链接： ng-model for <input type="file"/>

Answer 3

您无法在计算机上获取该文件的物理地址。 HTML输入类型文件返回文件对象。

您可以创建一个指令来获取文件的名称和大小，

app.directive('fileupload', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;
                console.log(files[0].name);
                console.log(files[0].size);
            });
        }
    }
}]);

像

一样使用它

<input type="file" ng-model="mdphoto" class="form-control" fileupload />

Answer 4

我已经厌倦了jquery希望这会帮助你

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="row form-clearify" style="margin-top:3px;">
    <div class="col-md-6 col-sm-6 col-xs-12" style="background-color:whitesmoke;">
       <label>Upload Your Photo</label>
       <input type="file" ng-model="mdphoto"   id="fileSelected" class="form-control" />
    </div>
    </div>
   
    <p id="filePath"></p> 
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $('#fileSelected').on('change', function (evt) {
        var files = $(evt.currentTarget).get(0).files;
        
        if(files.length > 0) {
        
            $('#filePath').text($('#fileSelected').val());
        }
    });
});
</script>
</html>

＆＃13;

从输入文件html / angularjs获取所选文件的url

4 个答案: