angularImageUpload/index.html at master · abaddonGIT/angularImageUpload · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>

<html ng-app="app" lang="en" id="ng-app">
<head>
    <meta charset="utf-8"/>

    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <title></title>
</head>
<body ng-controller="uploadeController">

<div id="wrapper">
    <div class="uplodes">
        <fieldset>
            <legend>И кнопка для выбора файлов и связанное сним поле drag and drop</legend>
            <div data-drop-zone result="uploader" id="dropZone" ng-show="uploader.isHtml5">
                <div ng-repeat="item in uploader.queue" class="dropPreview sort" id="{{item.unicid}}"
                     data-drag-sort="item">
                    <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>

                    <div ng-show="uploader.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
                    {{item.file.name}}
                </div>
            </div>
            <input type="file" data-uploade-source="flash" settings="uplode1" result="uploader"/>

            <div id="all">{{uploader.allUploded}}</div>

            <div class="uplode_list">
                <table>
                    <tr ng-repeat="item in uploader.queue" class="sort" id="{{item.unicid}}" data-drag-sort="item">
                        <td class="uplode-item">
                            <div data-image-thumb="item.file" class="thumbs"
                                 data-width="100"></div>
                            {{item.file.name}}
                        </td>
                        <td ng-show="item.file.size">{{item.mbSize}} мб.</td>
                        <td ng-show="uploader.isHtml5">
                            <div class="progress-bar">
                                <span style="width: {{item.progress}}%"></span>
                            </div>
                        </td>
                        <td>
                            <span class="{{item.isUploaded ? 'good fa fa-check fa-2x' : 'loading'}}"></span>
                        </td>
                        <td>
                            <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
                        </td>
                    </tr>
                </table>
            </div>
            <b ng-repeat="error in uploader.errorQueue">{{error.error}}</b>
        </fieldset>
        <fieldset>
            <legend>Самостоятельное поле drag and drop</legend>
            <div data-drop-zone result="uploader3" settings="uplode3" id="dropZone" ng-show="uploader3.isHtml5">
                <div ng-repeat="item in uploader3.queue" class="dropPreview sort" id="{{item.unicid}}"
                     data-drag-sort="item">
                    <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>

                    <div ng-show="uploader3.isHtml5" data-image-thumb="item.file" class="thumbs" data-width="100"></div>
                    {{item.file.name}}
                </div>
            </div>
        </fieldset>
        <fieldset>
            <legend>Отдельное поле для загрузки файлов</legend>
            <input type="file" data-uploade-source settings="uplode2" result="uploader1"/>

            <div id="all">{{uploader1.allUploded}}</div>

            <div class="uplode_list">
                <table>
                    <tr ng-repeat="item in uploader1.queue" class="sort" id="{{item.unicid}}" data-drag-sort="item">
                        <td class="uplode-item">
                            <div data-image-thumb="item.file" class="thumbs"
                                 data-width="100"></div>
                            {{item.file.name}}
                        </td>
                        <td ng-show="item.file.size">{{item.mbSize}} мб.</td>
                        <td ng-show="uploader.isHtml5">
                            <div class="progress-bar">
                                <span style="width: {{item.progress}}%"></span>
                            </div>
                        </td>
                        <td>
                            <span class="{{item.isUploaded ? 'good fa fa-check fa-2x' : 'loading'}}"></span>
                        </td>
                        <td>
                            <b ng-click="item.remove()" class="fa fa-times-circle fa-2x pointer close"></b>
                        </td>
                    </tr>
                </table>
            </div>
        </fieldset>
    </div>
</div>

<script type="text/javascript" src="js/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="js/libs/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/libs/swfupload/swfupload.queue.js"></script>
<script type="text/javascript" src="js/fileUploader/fileUploader.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</footer>
</body>
</html>