FancyUpload - Swiff meets Ajax

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Andreas Warnaar

Andreas Warnaar

09/05/2008 13:58:00
Quote Anchor link
Ik ben al ff bezig FancyUpload draaiende te krijgen, maar ik krijg steeds maar deze melding :

"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?
 
PHP hulp

PHP hulp

11/04/2021 02:45:30
 
Jacco Engel

Jacco Engel

09/05/2008 13:59:00
Quote Anchor link
Relevante code? Mn glazenbol ligt namelijk ter reparatie bij de glasblazer
 
Hipska BE

Hipska BE

09/05/2008 14:01:00
Quote Anchor link
Mijn bol zegt dat het probleem hem situeert ergens regel 45.
 
Jacco Engel

Jacco Engel

09/05/2008 14:04:00
Quote Anchor link
Waar heb je die van jou vandaan. Die van mij is aan een upgrade toe :( :S
 
Andreas Warnaar

Andreas Warnaar

09/05/2008 14:16:00
Quote Anchor link
;(
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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
Gewijzigd op 01/01/1970 01:00:00 door Andreas Warnaar
 
Jacco Engel

Jacco Engel

09/05/2008 14:18:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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();
        }
    });


Denk dat het hier in zit.

en zoek voor de grap evne de definitie van relevant op
 
Jelmer -

Jelmer -

09/05/2008 15:11:00
Quote Anchor link
Heb je de form action wel aangepast om naar jouw uploadscript te verwijzen, waar jij dan zelf met $_FILES etc in PHP je geüploade bestand verder verwerkt?
 
Andreas Warnaar

Andreas Warnaar

09/05/2008 15:25:00
Quote Anchor link
Ja..

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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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);
 
?>
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.