https://cafp.org.tw/app/directives/fileField/fileField.js?v=123

1app.directive("fileField", function() {
2    return {
3        require: "ngModel",
4        restrict: "E",
5        scope: {
6            preview: '=preview',
7            fileName: '=fileName'
8        },
9        link: function(scope, element, attrs, ngModel) {
10            if (!attrs.class && !attrs.ngClass) {
11                element.addClass("btn")
12            }
13            var accept = "";
14            var my = scope;
15
16            accept = attrs.custom;
17            element.find("input").attr("accept", accept);
18
19            var fileField = element.find("input");
20            fileField.bind("change", function(event) {
21                scope.$evalAsync(function() {
22                    if (event.target.files[0]) {
23                        ngModel.$setViewValue(event.target.files[0]);
24                        if (attrs.preview) {
25                            var reader = new FileReader;
26                            reader.onload = function(e) {
27                                scope.$evalAsync(function() {
28                                    if (attrs.size) {
29                                        var size = JSON.parse(attrs.size);
30                                        var newImg = new Image();
31                                        newImg.src = e.target.result;
32                                        newImg.onload = function() {
33                                            if (this.width != size[0] || this.height != size[1]) {
34                                                my.preview = "";
35                                                my.path = "";
36                                                event.target.value = null;
37                                                alert("圖片尺寸錯誤");
38                                            }
39                                        }
40                                        my.preview = e.target.result;
41                                        my.path = event.target.value;
42                                    } else {
43                                        my.preview = e.target.result;
44                                        my.path = event.target.value;
45                                    }
46
47                                    // var check = e.target.result.slice(5, e.target.result.indexOf(';'));
48                                    // if (check != 'image/jpeg' && check != 'image/png') {
49                                    //     my.preview = "";
50                                    //     my.path = "";
51                                    //     event.target.value = null;
52                                    //     error("上傳檔案類型錯誤");
53                                    // }    
54
55                                })
56                            };
57                            reader.readAsDataURL(event.target.files[0])
58                        }
59                        if (attrs.fileName) {
60                            scope.fileName = event.target.files[0].name;
61                        }
62                    }
63                })
64            });
65            fileField.bind("click", function(e) {
66                e.stopPropagation()
67            });
68            element.bind("click", function(e) {
69                e.preventDefault();
70                fileField[0].click()
71            })
72            scope.$watch(function() {
73                return ngModel.$modelValue;
74            }, function(newValue) {
75                if (!newValue) {
76                    fileField.val(null);
77                }
78            });
79        },
80        template: '<button type="button" style="background-color:#FFFFFF; padding:0px; margin:0px; outline:none;"><ng-transclude></ng-transclude><input type="file" style="display:none"></button>',
81        // template: '<button type="button" style="background-color:#FFFFFF; padding:0px; outline:none;"><div class="webuploader-pick">點擊選擇圖片</div><input type="file" style="display:none; padding:0px;""></button>',
82        replace: true,
83        transclude: true
84    }
85});