FancyUpload - Swiff meets Ajax
"This form is just an example fallback for the unobtrusive behaviour of FancyUpload. "
Ik ben geen ster in Javascript en waarschijnlijk is iets voor de hand liggens maar ik weet niet wat..
Iemand?
Code heb ik over genomen van de website:
http://digitarald.de/project/fancyupload/2-0/showcase/photoqueue/
Hopelijk kunnen jullie me verder helpen zonder hekserij :()
Code (php)
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
#demo-status
{
background-color: #F9F7ED;
padding: 10px 15px;
width: 420px;
}
#demo-status .progress
{
background: white url(images/progress.gif) no-repeat;
background-position: +50% 0;
margin-right: 0.5em;
}
#demo-status .progress-text
{
font-size: 0.9em;
font-weight: bold;
}
#demo-list
{
list-style: none;
width: 450px;
margin: 0;
}
#demo-list li.file
{
border-bottom: 1px solid #eee;
background: url(images/file.png) no-repeat 4px 4px;
}
#demo-list li.file.file-uploading
{
background-image: url(images/uploading.png);
background-color: #D9DDE9;
}
#demo-list li.file.file-success
{
background-image: url(images/success.png);
}
#demo-list li.file.file-failed
{
background-image: url(images/assets/failed.png);
}
#demo-list li.file .file-name
{
font-size: 1.2em;
margin-left: 44px;
display: block;
clear: left;
line-height: 40px;
height: 40px;
font-weight: bold;
}
#demo-list li.file .file-size
{
font-size: 0.9em;
line-height: 18px;
float: right;
margin-top: 2px;
margin-right: 6px;
}
#demo-list li.file .file-info
{
display: block;
margin-left: 44px;
font-size: 0.9em;
line-height: 20px;
clear
}
#demo-list li.file .file-remove
{
clear: right;
float: right;
line-height: 18px;
margin-right: 6px;
}
</style>
<script type="text/javascript" src="/scripts/mootools-release-1.11.js"></script>
<script type="text/javascript" src="/scripts/Swiff.Uploader.js"></script>
<script type="text/javascript" src="/scripts/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="/scripts/FancyUpload2.js"></script>
<script type="text/javascript">
window.addEvent('load', function() {
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
'url': $('form-demo').action,
'fieldName': 'photoupload',
'path': '/scripts/Swiff.Uploader.swf',
'onLoad': function() {
$('demo-status').removeClass('hide');
$('demo-fallback').destroy();
}
});
/**
* Various interactions
*/
$('demo-browse-all').addEvent('click', function() {
swiffy.browse();
return false;
});
$('demo-browse-images').addEvent('click', function() {
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
return false;
});
$('demo-clear').addEvent('click', function() {
swiffy.removeFile();
return false;
});
$('demo-upload').addEvent('click', function() {
swiffy.upload();
return false;
});
});
</script>
</head>
<body>
<form action="/scripts/script.php" method="post" enctype="multipart/form-data" id="form-demo">
<fieldset id="demo-fallback">
<legend>File Upload</legend>
<p>
Selected your photo to upload.<br />
<strong>This form is just an example fallback for the unobtrusive behaviour of FancyUpload.</strong>
</p>
<label for="demo-photoupload">
Upload Photos:
<input type="file" name="photoupload" id="demo-photoupload" />
</label>
</fieldset>
<div id="demo-status" class="hide">
<p>
<a href="#" id="demo-browse-all">Browse Files</a> |
<a href="#" id="demo-browse-images">Browse Only Images</a> |
<a href="#" id="demo-clear">Clear List</a> |
<a href="#" id="demo-upload">Upload</a>
</p>
<div>
<strong class="overall-title">Overall progress</strong><br />
<img src="images/bar.gif" class="progress overall-progress" />
</div>
<div>
<strong class="current-title">File Progress</strong><br />
<img src="images/bar.gif" class="progress current-progress" />
</div>
<div class="current-text"></div>
</div>
<ul id="demo-list"></ul>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
#demo-status
{
background-color: #F9F7ED;
padding: 10px 15px;
width: 420px;
}
#demo-status .progress
{
background: white url(images/progress.gif) no-repeat;
background-position: +50% 0;
margin-right: 0.5em;
}
#demo-status .progress-text
{
font-size: 0.9em;
font-weight: bold;
}
#demo-list
{
list-style: none;
width: 450px;
margin: 0;
}
#demo-list li.file
{
border-bottom: 1px solid #eee;
background: url(images/file.png) no-repeat 4px 4px;
}
#demo-list li.file.file-uploading
{
background-image: url(images/uploading.png);
background-color: #D9DDE9;
}
#demo-list li.file.file-success
{
background-image: url(images/success.png);
}
#demo-list li.file.file-failed
{
background-image: url(images/assets/failed.png);
}
#demo-list li.file .file-name
{
font-size: 1.2em;
margin-left: 44px;
display: block;
clear: left;
line-height: 40px;
height: 40px;
font-weight: bold;
}
#demo-list li.file .file-size
{
font-size: 0.9em;
line-height: 18px;
float: right;
margin-top: 2px;
margin-right: 6px;
}
#demo-list li.file .file-info
{
display: block;
margin-left: 44px;
font-size: 0.9em;
line-height: 20px;
clear
}
#demo-list li.file .file-remove
{
clear: right;
float: right;
line-height: 18px;
margin-right: 6px;
}
</style>
<script type="text/javascript" src="/scripts/mootools-release-1.11.js"></script>
<script type="text/javascript" src="/scripts/Swiff.Uploader.js"></script>
<script type="text/javascript" src="/scripts/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="/scripts/FancyUpload2.js"></script>
<script type="text/javascript">
window.addEvent('load', function() {
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
'url': $('form-demo').action,
'fieldName': 'photoupload',
'path': '/scripts/Swiff.Uploader.swf',
'onLoad': function() {
$('demo-status').removeClass('hide');
$('demo-fallback').destroy();
}
});
/**
* Various interactions
*/
$('demo-browse-all').addEvent('click', function() {
swiffy.browse();
return false;
});
$('demo-browse-images').addEvent('click', function() {
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
return false;
});
$('demo-clear').addEvent('click', function() {
swiffy.removeFile();
return false;
});
$('demo-upload').addEvent('click', function() {
swiffy.upload();
return false;
});
});
</script>
</head>
<body>
<form action="/scripts/script.php" method="post" enctype="multipart/form-data" id="form-demo">
<fieldset id="demo-fallback">
<legend>File Upload</legend>
<p>
Selected your photo to upload.<br />
<strong>This form is just an example fallback for the unobtrusive behaviour of FancyUpload.</strong>
</p>
<label for="demo-photoupload">
Upload Photos:
<input type="file" name="photoupload" id="demo-photoupload" />
</label>
</fieldset>
<div id="demo-status" class="hide">
<p>
<a href="#" id="demo-browse-all">Browse Files</a> |
<a href="#" id="demo-browse-images">Browse Only Images</a> |
<a href="#" id="demo-clear">Clear List</a> |
<a href="#" id="demo-upload">Upload</a>
</p>
<div>
<strong class="overall-title">Overall progress</strong><br />
<img src="images/bar.gif" class="progress overall-progress" />
</div>
<div>
<strong class="current-title">File Progress</strong><br />
<img src="images/bar.gif" class="progress current-progress" />
</div>
<div class="current-text"></div>
</div>
<ul id="demo-list"></ul>
</form>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Andreas Warnaar
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
'url': $('form-demo').action,
'fieldName': 'photoupload',
'path': '/scripts/Swiff.Uploader.swf',
'onLoad': function() {
$('demo-status').removeClass('hide');
$('demo-fallback').destroy();
}
});
'url': $('form-demo').action,
'fieldName': 'photoupload',
'path': '/scripts/Swiff.Uploader.swf',
'onLoad': function() {
$('demo-status').removeClass('hide');
$('demo-fallback').destroy();
}
});
Denk dat het hier in zit.
en zoek voor de grap evne de definitie van relevant op
Jacco heeft volgens mij wel gelijk dat het in dat deel bepaald wordt hoe de file browser moet werken maar ik heb nog niet uit gevonden waar dat in moeten zitten.
Onderstaande code is het script voor het formulier..
script.php
Code (php)
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
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
<?php
$result = array();
if (isset($_FILES['photoupload']) )
{
$file = $_FILES['photoupload']['tmp_name'];
$error = false;
$size = false;
if (!is_uploaded_file($file) || ($_FILES['photoupload']['size'] > 2 * 1024 * 1024) )
{
$error = 'Please upload only files smaller than 2Mb!';
}
if (!$error && !($size = @getimagesize($file) ) )
{
$error = 'Please upload only images, no other files are supported.';
}
if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8) ) )
{
$error = 'Please upload only images of type JPEG.';
}
if (!$error && ($size[0] < 25) || ($size[1] < 25))
{
$error = 'Please upload an image bigger than 25px.';
}
$addr = gethostbyaddr($_SERVER['REMOTE_ADDR']);
$log = fopen('script.log', 'a');
fputs($log, ($error ? 'FAILED' : 'SUCCESS') . ' - ' . preg_replace('/^[^.]+/', '***', $addr) . ": {$_FILES['photoupload']['name']} - {$_FILES['photoupload']['size']} byte\n" );
fclose($log);
if ($error)
{
$result['result'] = 'failed';
$result['error'] = $error;
}
else
{
$result['result'] = 'success';
$result['size'] = "Uploaded an image ({$size['mime']}) with {$size[0]}px/{$size[1]}px.";
}
}
else
{
$result['result'] = 'error';
$result['error'] = 'Missing file or internal error!';
}
if (!headers_sent() )
{
header('Content-type: application/json');
}
echo json_encode($result);
?>
$result = array();
if (isset($_FILES['photoupload']) )
{
$file = $_FILES['photoupload']['tmp_name'];
$error = false;
$size = false;
if (!is_uploaded_file($file) || ($_FILES['photoupload']['size'] > 2 * 1024 * 1024) )
{
$error = 'Please upload only files smaller than 2Mb!';
}
if (!$error && !($size = @getimagesize($file) ) )
{
$error = 'Please upload only images, no other files are supported.';
}
if (!$error && !in_array($size[2], array(1, 2, 3, 7, 8) ) )
{
$error = 'Please upload only images of type JPEG.';
}
if (!$error && ($size[0] < 25) || ($size[1] < 25))
{
$error = 'Please upload an image bigger than 25px.';
}
$addr = gethostbyaddr($_SERVER['REMOTE_ADDR']);
$log = fopen('script.log', 'a');
fputs($log, ($error ? 'FAILED' : 'SUCCESS') . ' - ' . preg_replace('/^[^.]+/', '***', $addr) . ": {$_FILES['photoupload']['name']} - {$_FILES['photoupload']['size']} byte\n" );
fclose($log);
if ($error)
{
$result['result'] = 'failed';
$result['error'] = $error;
}
else
{
$result['result'] = 'success';
$result['size'] = "Uploaded an image ({$size['mime']}) with {$size[0]}px/{$size[1]}px.";
}
}
else
{
$result['result'] = 'error';
$result['error'] = 'Missing file or internal error!';
}
if (!headers_sent() )
{
header('Content-type: application/json');
}
echo json_encode($result);
?>