ฉันใหม่สำหรับเชิงมุม ฉันพยายามอ่านเส้นทางของไฟล์ที่อัปโหลดจากฟิลด์ 'ไฟล์' ของ HTML ทุกครั้งที่มีการ 'เปลี่ยนแปลง' เกิดขึ้นในฟิลด์นี้ ถ้าฉันใช้ 'onChange' มันใช้งานได้ แต่เมื่อฉันใช้วิธีเชิงมุมโดยใช้ 'ng-change' มันจะไม่ทำงาน

<script>
   var DemoModule = angular.module("Demo",[]);
   DemoModule .controller("form-cntlr",function($scope){
   $scope.selectFile = function()
   {
        $("#file").click();
   }
   $scope.fileNameChaged = function()
   {
        alert("select file");
   }
});
</script>

<div ng-controller="form-cntlr">
    <form>
         <button ng-click="selectFile()">Upload Your File</button>
         <input type="file" style="display:none" 
                          id="file" name='file' ng-Change="fileNameChaged()"/>
    </form>  
</div>

fileNameChaged ()ไม่เคยโทร Firebug ยังไม่แสดงข้อผิดพลาดใด ๆ

ไม่รองรับการควบคุมการอัปโหลดไฟล์

https://github.com/angular/angular.js/issues/1375

<div ng-controller="form-cntlr">
        <form>
             <button ng-click="selectFile()">Upload Your File</button>
             <input type="file" style="display:none" 
                id="file" name='file' onchange="angular.element(this).scope().fileNameChanged(this)" />
        </form>  
    </div>

แทน

 <input type="file" style="display:none" 
    id="file" name='file' ng-Change="fileNameChanged()" />

คุณลองได้ไหม

<input type="file" style="display:none" 
    id="file" name='file' onchange="angular.element(this).scope().fileNameChanged()" />

หมายเหตุ: สิ่งนี้ต้องการให้แอปพลิเคชันเชิงมุมอยู่ในโหมดดีบักเสมอ สิ่งนี้จะไม่ทำงานในรหัสการผลิตหากโหมดดีบักถูกปิดใช้งาน

และในการทำงานของคุณเปลี่ยนแทน

$scope.fileNameChanged = function() {
   alert("select file");
}

คุณลองได้ไหม

$scope.fileNameChanged = function() {
  console.log("select file");
}

ด้านล่างนี้เป็นตัวอย่างหนึ่งของการอัปโหลดไฟล์ที่มีการอัปโหลดไฟล์แบบลากอาจเป็นประโยชน์ http://jsfiddle.net/danielzen/utp7j/

ข้อมูลการอัพโหลดไฟล์เชิงมุม

URL สำหรับการอัปโหลดไฟล์ AngularJS ใน ASP.Net

http://cgeers.com/2013/05/03/angularjs-file-upload/

การอัปโหลดหลายไฟล์แบบดั้งเดิมของ AngularJs พร้อมดำเนินการกับ NodeJS

http://jasonturim.wordpress.com/2013/09/12/angularjs-native-multi-file-upload-with-progress/

ngUpload - บริการ AngularJS สำหรับการอัปโหลดไฟล์โดยใช้ iframe

http://ngmodules.org/modules/ngUpload

ฉันสั่งเล็ก ๆ เพื่อฟังการเปลี่ยนแปลงอินพุตไฟล์

ดู JSFiddle

view.html:

<input type="file" custom-on-change="uploadFile">

controller.js:

app.controller('myCtrl', function($scope){
    $scope.uploadFile = function(event){
        var files = event.target.files;
    };
});     

directive.js:

app.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.customOnChange);
      element.on('change', onChangeHandler);
      element.on('$destroy', function() {
        element.off();
      });

    }
  };
});

นี่คือการปรับแต่งของคนอื่น ๆ รอบ ๆ ข้อมูลจะสิ้นสุดในรูปแบบ ng ซึ่งเป็นปกติสิ่งที่คุณต้องการ

มาร์กอัป (เพียงสร้างไฟล์ข้อมูลแอททริบิวต์เพื่อหาคำสั่ง)

<input
    data-file
    id="id_image" name="image"
    ng-model="my_image_model" type="file">

JS

app.directive('file', function() {
    return {
        require:"ngModel",
        restrict: 'A',
        link: function($scope, el, attrs, ngModel){
            el.bind('change', function(event){
                var files = event.target.files;
                var file = files[0];

                ngModel.$setViewValue(file);
                $scope.$apply();
            });
        }
    };
});

วิธีที่สะอาดคือการเขียนคำสั่งของคุณเองเพื่อผูกกับเหตุการณ์ "เปลี่ยน" เพียงเพื่อให้คุณรู้ว่า IE9 ไม่รองรับ FormData ดังนั้นคุณจึงไม่สามารถรับวัตถุไฟล์จากเหตุการณ์การเปลี่ยนแปลงได้

คุณสามารถใช้ได้ ไลบรารีng-file-uploadซึ่งรองรับ IE กับ FileAPI polyfill แล้วและทำให้การโพสต์ไฟล์ไปยังเซิร์ฟเวอร์ทำได้ง่ายขึ้น มันใช้คำสั่งเพื่อให้บรรลุนี้

<script src="angular.min.js"></script>
<script src="ng-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="file" ngf-select="onFileSelect($files)" multiple>
</div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      Upload.upload({
        url: 'my/upload/url',
        data: {file: $file}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

ฉันได้ขยายแนวคิดของ @Stuart Axon เพื่อเพิ่มการเชื่อมโยงสองทางสำหรับอินพุตไฟล์ (เช่นอนุญาตให้รีเซ็ตอินพุตโดยรีเซ็ตค่ารุ่นกลับเป็นโมฆะ):

app.directive('bindFile', [function () {
    return {
        require: "ngModel",
        restrict: 'A',
        link: function ($scope, el, attrs, ngModel) {
            el.bind('change', function (event) {
                ngModel.$setViewValue(event.target.files[0]);
                $scope.$apply();
            });

            $scope.$watch(function () {
                return ngModel.$viewValue;
            }, function (value) {
                if (!value) {
                    el.val("");
                }
            });
        }
    };
}]);

การสาธิต

คล้ายกับคำตอบที่ดีอื่น ๆ ที่นี่ฉันเขียนคำสั่งเพื่อแก้ไขปัญหานี้ แต่การใช้งานนี้ยิ่งสะท้อนวิธีเชิงมุมของการแนบเหตุการณ์มากขึ้น

คุณสามารถใช้คำสั่งเช่นนี้:

HTML

<input type="file" file-change="yourHandler($event, files)" />

อย่างที่คุณเห็นคุณสามารถฉีดไฟล์ที่เลือกลงในตัวจัดการเหตุการณ์ของคุณได้เช่นเดียวกับที่คุณฉีด $ วัตถุออบเจ็กต์ลงในตัวจัดการเหตุการณ์ ng

จาวาสคริ

angular
  .module('yourModule')
  .directive('fileChange', ['$parse', function($parse) {

    return {
      require: 'ngModel',
      restrict: 'A',
      link: function ($scope, element, attrs, ngModel) {

        // Get the function provided in the file-change attribute.
        // Note the attribute has become an angular expression,
        // which is what we are parsing. The provided handler is 
        // wrapped up in an outer function (attrHandler) - we'll 
        // call the provided event handler inside the handler()
        // function below.
        var attrHandler = $parse(attrs['fileChange']);

        // This is a wrapper handler which will be attached to the
        // HTML change event.
        var handler = function (e) {

          $scope.$apply(function () {

            // Execute the provided handler in the directive's scope.
            // The files variable will be available for consumption
            // by the event handler.
            attrHandler($scope, { $event: e, files: e.target.files });
          });
        };

        // Attach the handler to the HTML change event 
        element[0].addEventListener('change', handler, false);
      }
    };
  }]);

คำสั่งนี้ส่งไฟล์ที่เลือกด้วย:

/**
 *File Input - custom call when the file has changed
 */
.directive('onFileChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeHandler = scope.$eval(attrs.onFileChange);

      element.bind('change', function() {
        scope.$apply(function() {
          var files = element[0].files;
          if (files) {
            onChangeHandler(files);
          }
        });
      });

    }
  };
});

HTML วิธีใช้:

<input type="file" ng-model="file" on-file-change="onFilesSelected">

ในตัวควบคุมของฉัน:

$scope.onFilesSelected = function(files) {
     console.log("files - " + files);
};

ฉันแนะนำให้สร้างคำสั่ง

<input type="file" custom-on-change handler="functionToBeCalled(params)">

app.directive('customOnChange', [function() {
        'use strict';

        return {
            restrict: "A",

            scope: {
                handler: '&'
            },
            link: function(scope, element){

                element.change(function(event){
                    scope.$apply(function(){
                        var params = {event: event, el: element};
                        scope.handler({params: params});
                    });
                });
            }

        };
    }]);

คำสั่งนี้สามารถใช้ได้หลายครั้งโดยใช้ขอบเขตของตัวเองและไม่ขึ้นอยู่กับขอบเขตหลัก คุณยังสามารถมอบพารามิเตอร์ให้กับฟังก์ชันจัดการได้ ฟังก์ชันตัวจัดการจะถูกเรียกด้วยวัตถุขอบเขตที่ใช้งานอยู่เมื่อคุณเปลี่ยนอินพุต $ ใช้อัปเดตโมเดลของคุณในแต่ละครั้งที่มีการเรียกเหตุการณ์การเปลี่ยนแปลง

รุ่น jqLite เชิงมุมที่ง่ายที่สุด

JS:

.directive('cOnChange', function() {
    'use strict';

    return {
        restrict: "A",
        scope : {
            cOnChange: '&'
        },
        link: function (scope, element) {
            element.on('change', function () {
                scope.cOnChange();
        });
        }
    };
});

HTML:

<input type="file" data-c-on-change="your.functionName()">

สาธิตการทำงานของคำสั่ง "ไฟล์ - อินพุต" ที่ใช้งานได้กับng-change¹

ในการทำให้<input type=file>องค์ประกอบทำงานตามคำสั่งng-changeมันต้องการคำสั่งที่กำหนดเองที่ทำงานกับคำสั่งng-model

<input type="file" files-input ng-model="fileList" 
       ng-change="onInputChange()" multiple />

DEMO

angular.module("app",[])
.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

.controller("ctrl", function($scope) {
     $scope.onInputChange = function() {
         console.log("input change");
     };
})

<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="ctrl">
    <h1>AngularJS Input `type=file` Demo</h1>
    
    <input type="file" files-input ng-model="fileList" 
           ng-change="onInputChange()" multiple />
    
    <h2>Files</h2>
    <div ng-repeat="file in fileList">
      {{file.name}}
    </div>
  </body>

โซลูชันที่สมบูรณ์เกินไปโดยใช้:

`onchange="angular.element(this).scope().UpLoadFile(this.files)"`

วิธีง่ายๆในการซ่อนฟิลด์อินพุตและแทนที่ด้วยรูปภาพที่นี่หลังจากการแก้ปัญหาที่ยังต้องแฮ็คในเชิงมุม แต่ที่ทำงาน [TriggerEvent ไม่ทำงานตามที่คาดไว้]

การแก้ไขปัญหา:

• วางอินพุตฟิลด์ในจอแสดงผล: ไม่มี [ฟิลด์อินพุตมีอยู่ใน DOM แต่มองไม่เห็น]
• วางภาพของคุณไว้ที่ภาพให้ใช้ nb-click () เพื่อเปิดใช้งานวิธีการ

เมื่อมีการคลิกที่ภาพจำลองการกระทำของ DOM 'คลิก' ในช่องใส่ และอื่น ๆ !

 var tmpl = '<input type="file" id="{{name}}-filein"' + 
             'onchange="angular.element(this).scope().UpLoadFile(this.files)"' +
             ' multiple accept="{{mime}}/*" style="display:none" placeholder="{{placeholder}}">'+
             ' <img id="{{name}}-img" src="{{icon}}" ng-click="clicked()">' +
             '';
   // Image was clicked let's simulate an input (file) click
   scope.inputElem = elem.find('input'); // find input in directive
   scope.clicked = function () {
         console.log ('Image clicked');
         scope.inputElem[0].click(); // Warning Angular TriggerEvent does not work!!!
    };

ฉันทำแบบนี้แล้ว

<!-- HTML -->
<button id="uploadFileButton" class="btn btn-info" ng-click="vm.upload()">    
<span  class="fa fa-paperclip"></span></button>
<input type="file" id="txtUploadFile" name="fileInput" style="display: none;" />

// self is the instance of $scope or this
self.upload = function () {
   var ctrl = angular.element("#txtUploadFile");
   ctrl.on('change', fileNameChanged);
   ctrl.click();
}

function fileNameChanged(e) {
    console.log(self.currentItem);
    alert("select file");
}

อีกวิธีที่น่าสนใจในการฟังการเปลี่ยนแปลงอินพุตไฟล์คือการเฝ้าดูแอ็ตทริบิวต์ ng-model ของอินพุตไฟล์ FileModel นอกหลักสูตรเป็นคำสั่งที่กำหนดเอง

แบบนี้:

HTML -> <input type="file" file-model="change.fnEvidence">

รหัส JS ->

$scope.$watch('change.fnEvidence', function() {
                    alert("has changed");
                });

หวังว่ามันจะช่วยใครบางคน

องค์ประกอบเชิงมุม (เช่นองค์ประกอบรากของคำสั่ง) เป็นวัตถุ jQuery [Lite] ซึ่งหมายความว่าเราสามารถลงทะเบียนฟังเหตุการณ์เช่น:

link($scope, $el) {
    const fileInputSelector = '.my-file-input'

    function setFile() {
        // access file via $el.find(fileInputSelector).get(0).files[0]
    }

    $el.on('change', fileInputSelector, setFile)
}

นี่คือการมอบหมายเหตุการณ์ jQuery ที่นี่ผู้ฟังติดอยู่กับองค์ประกอบรากของคำสั่ง เมื่อมีการเรียกใช้เหตุการณ์เหตุการณ์จะเกิดฟองสบู่ขึ้นกับองค์ประกอบที่ลงทะเบียนไว้และ jQuery จะพิจารณาว่าเหตุการณ์นั้นเกิดขึ้นจากองค์ประกอบภายในที่ตรงกับตัวเลือกที่กำหนดหรือไม่ ถ้าเป็นเช่นนั้นตัวจัดการจะยิง

ประโยชน์ของวิธีนี้คือ:

• ตัวจัดการถูกผูกไว้กับองค์ประกอบ $ ซึ่งจะถูกล้างโดยอัตโนมัติเมื่อขอบเขตคำสั่งถูกทำลาย
• ไม่มีรหัสในแม่แบบ
• จะทำงานแม้ว่าผู้รับมอบสิทธิ์เป้าหมาย (อินพุต) ยังไม่ได้แสดงผลเมื่อคุณลงทะเบียนตัวจัดการเหตุการณ์ (เช่นเมื่อใช้ng-ifหรือng-switch)

http://api.jquery.com/on/

คุณสามารถเพิ่มรหัสด้านล่างใน onchange และมันจะตรวจจับการเปลี่ยนแปลง คุณสามารถเขียนฟังก์ชั่นบน X click หรือบางสิ่งเพื่อลบข้อมูลไฟล์ ..

document.getElementById(id).value = "";