-
Notifications
You must be signed in to change notification settings - Fork 1
/
example.html
101 lines (87 loc) · 3.3 KB
/
example.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>user-image-cache example</title>
<style type="text/css">
.no-local .localDependent {
display: none;
}
#imageEl {
max-width: 300px;
max-height: 300px;
}
/* File Input Click Handler: See http://www.quirksmode.org/dom/inputfile.html */
.fileInput {
position: relative;
}
.fileInput > input[type="button"] {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.fileInput > input[type='file'] {
position: relative;
text-align: right;
opacity: 0;
z-index: 2;
}
</style>
</head>
<body class="no-local">
<div>
<label for="pathToImage">Image:</label><input type="text" id="pathToImage">
<span class="fileInput localDependent">
<input type="button" value="Browse...">
<input type="file" accept="image/*" id="localImage">
</span>
</div>
<ul id="cacheList"></ul>
<div id="errorMsg"></div>
<img id="imageEl">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="user-image-cache.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function errorHandler(code) {
$("#errorMsg").html("*** " + "Failed to load image. Error code: " + JSON.stringify(code));
}
var pathToImage = $("#pathToImage"),
imageEl = $("#imageEl"),
cacheList = $("#cacheList");
// Init the loader
UserImageCache.setImageEl(imageEl[0]);
// On image load record the entry information so the user can restore
imageEl.load(function() {
if (!cacheList.find("[data-entryid=\"" + UserImageCache.getEntryId() + "\"]").length) {
cacheList.append(
$("<li><a data-entryid=\"" + UserImageCache.getEntryId() + "\" href=\"#\">"
+ UserImageCache.getDisplayName()
+ "</a></li>"));
}
});
imageEl.error(function() { errorHandler(); });
$("#cacheList").delegate("a", "click", function() {
var entryId = $(this).data("entryid");
$("#errorMsg").html("");
UserImageCache.load(entryId, errorHandler);
});
// User Input Setup
pathToImage.change(function(event) {
$("#errorMsg").html("");
UserImageCache.load(pathToImage.val(), errorHandler);
});
if (UserImageCache.isLocalSupported()) {
$("#localImage").bind("change", function(event) {
var file = this.files[0];
$("#errorMsg").html("");
UserImageCache.load(file, errorHandler);
});
// Unhide the browse button if the current browser supports local files
$(".no-local").removeClass("no-local");
}
});
</script>
</body>
</html>