-
Notifications
You must be signed in to change notification settings - Fork 138
/
Copy pathdemo.html
109 lines (86 loc) · 3.51 KB
/
demo.html
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
108
109
<html ng-app="imageuploadDemo">
<head>
<title>imageupload Demo</title>
</head>
<body ng-controller="DemoCtrl">
<form name="contactform">
<h2>Single image</h2>
<div>
<label for="inputImage">Image</label>
<input id="inputImage" type="file" accept="image/*" image="image" />
<img ng-show="image" ng-src="{{image.url}}" type="{{image.file.type}}"/>
<button type="submit" ng-click="single(image)" disabled>Add</button>
<button type="reset">Clear</button>
</div>
<hr />
<h2>Single image with resizing</h2>
<div>
<label for="inputImage2">Image 2</label>
<input id="inputImage2"
type="file"
accept="image/*"
image="image2"
resize-max-height="300"
resize-max-width="250"
resize-quality="0.7" />
<p>Original</p>
<img ng-show="image2" ng-src="{{image2.url}}" type="{{image2.file.type}}"/>
<p>Resized</p>
<img ng-show="image2" ng-src="{{image2.resized.dataURL}}"/>
<button type="submit" ng-click="single(image2.resized)" disabled>Add</button>
</div>
<hr />
<h2>Multiple images</h2>
<div>
<label for="inputImage3">Image 3</label>
<input id="inputImage3"
type="file"
accept="image/*"
multiple
image="images3" />
<p>Originals</p>
<img ng-repeat="img in images3" ng-src="{{img.url}}" type="{{img.file.type}}"/>
<button type="submit" disabled>Add</button>
</div>
<hr />
<h2>Multiple images with resizing</h2>
<div>
<label for="inputImage4">Image 4</label>
<input id="inputImage4"
type="file"
accept="image/*"
multiple
image="images4"
resize-max-height="300"
resize-max-width="250"
resize-quality="0.7" />
<p>Originals</p>
<img ng-repeat="img in images4" ng-src="{{img.url}}" type="{{img.file.type}}"/>
<p>Resized</p>
<img ng-repeat="img in images4" ng-src="{{img.resized.dataURL}}" />
<button type="submit" disabled>Add</button>
</div>
<hr />
</form>
<p>Uploaded Image / Size: {{sizeInBytes}} Bytes</p>
<img ng-src="{{uploadedImgSrc}}" />
<script src="javascripts/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module('imageuploadDemo', ['imageupload'])
.controller('DemoCtrl', function($scope, $http) {
$scope.single = function(image) {
var formData = new FormData();
formData.append('image', image, image.name);
$http.post('upload', formData, {
headers: { 'Content-Type': false },
transformRequest: angular.identity
}).success(function(result) {
$scope.uploadedImgSrc = result.src;
$scope.sizeInBytes = result.size;
});
};
});
</script>
<script src="javascripts/imageupload.js" type="text/javascript"></script>
</body>
</html>