javascript - 从 ng-change 获取文件

Question

如何将其转换为可兼容的 angular.js，以便我获取 dataurl 并通过 $http.post 发送

<input type="file" id="imgfiles" name="imgfiles" accept="image/jpeg" onchange="readURL(this);">


function readURL(input) {
    if (input.files[0].size <= 1048576) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#cam_photo').attr('src', e.target.result).width(250).height(230);
                var a = $('#cam_photo').attr('src');
                data_url = a;
            };
            reader.readAsDataURL(input.files[0]);
        }
    } else {
        alert('File is too large. Upload file less than 1MB');
    }
}

Answer 1

使用angular.element(this).scope()获取范围

试试这个:

onchange="angular.element(this).scope().readURL(this)"

然后，在 Controller 中写入 $scope.readURL(input) 代码

$scope.readURL = function(input) {
    if (input.files[0].size <= 1048576) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#cam_photo').attr('src', e.target.result).width(250).height(230);
                var a = $('#cam_photo').attr('src');
                data_url = a;
            };
            reader.readAsDataURL(input.files[0]);
        }
    } else {
        alert('File is too large. Upload file less than 1MB');
    }
}