noSWFUpload/index.html at master · WebReflection/noSWFUpload · 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
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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
    <head>
        <title>noSWFUpload - Multiple Files Upload For Every Browser - No SWF Object Required</title>
        <meta http-equiv="content-Type" content="text/html; charset=UTF-8" />
        <meta name="description" content="noSWFUpload - Multiple Files Upload For Every Browser - No SWF Object Required" />
        <meta name="Keywords" content="upload,multiple,file,files,no swf,no flash,open source" />
        <meta name="category" content="Web 2.0" />
        <meta http-equiv="content-Language" content="en-US" />
        <meta name="identifier-url" content="www.3site.eu" />
        <meta name="author" content="Andrea Giammarchi" />
        <meta name ="copyright" content="Andrea Giammarchi" />
        <meta name ="generator" content="Notepad++" />
        <meta name="code_Language" content="JavaScript" />
        <meta name ="robots" content="ALL" />
        <style type="text/css">
        * {
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
            font-weight: normal;
        }
        img {
            border: 0;
        }
        body {
            text-align: center;
        }
        h1 {
            font-size: 12pt;
        }
        h2 {
            margin-top: 32px;
            font-size: 8pt;
            font-weight: bold;
        }
        h3 {
            font-size: 8pt;
        }
        div.form {
            text-align: left;
            margin: auto;
            width: 246px !important;
            width: 242px;
            height: 180px;
            position: relative;
            border: 1px solid #999;
        }
        input.submit {
            font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
            font-size: 8pt;
            width: 248px !important;
            width: 242px;
            border: 1px solid #999;
            margin: -1px 0 0 -1px;
            position: absolute;
            top: 180px;
            left: 0;
        }
        </style>
        <script type="text/javascript" src="noswfupload.js"></script>
        <script type="text/javascript">

        // add dedicated css
        noswfupload.css("css/noswfupload.css", "css/noswfupload-icons.css");


        onload = function(){
            var
                // the input type file to wrap
                input   = document.getElementsByTagName("input")[0],

                // the submit button
                submit  = document.getElementsByTagName("input")[1],

                // the form
                form    = document.getElementsByTagName("form")[0],

                // the form action to use with noswfupload
                url     = form.getAttribute("action") || form.action,

                // noswfupload wrap Object
                wrap;


            // if we do not need the form ...
                // move inputs outside the form since we do not need it
                with(form.parentNode){
                    appendChild(input);
                    appendChild(submit);
                };

                // remove the form
                form.parentNode.removeChild(form);

            // create the noswfupload.wrap Object with 1Mb of limit
            wrap = noswfupload.wrap(input, 1024 * 1024);

            // form and input are useless now (remove references)
            form = input = null;

            // assign event to the submit button
            noswfupload.event.add(submit, "click", function(e){

                // only if there is at least a file to upload
                if(wrap.files.length){
                    submit.setAttribute("disabled", "disabled");
                    wrap.upload(
                        // it is possible to declare events directly here
                        // via Object
                        // {onload:function(){ ... }, onerror:function(){ ... }, etc ...}
                        // these callbacks will be injected in the wrap object
                        // In this case events are implemented manually
                    );
                } else
                    noswfupload.text(wrap.dom.info, "No files selected");

                submit.blur();

                // block native events
                return  noswfupload.event.stop(e);
            });

            // set wrap object properties and methods (events)

            // url to upload files
            wrap.url = url;

            // accepted file types (filter)
            // wrap.fileType = "Images (*.jpg, *.jpeg, *.png, *.gif, *.bmp)";
            // fileType could contain whatever text but filter checks *.{extension} if present

            // handlers
            wrap.onerror = function(){
                noswfupload.text(this.dom.info, "WARNING: Unable to upload " + this.file.fileName);
            };

            // instantly vefore files are sent
            wrap.onloadstart = function(rpe, xhr){

                // we need to show progress bars and disable input file (no choice during upload)
                this.show(0);

                // write something in the span info
                noswfupload.text(this.dom.info, "Preparing for upload ... ");

            };

            // event called during progress. It could be the real one, if browser supports it, or a simulated one.
            wrap.onprogress = function(rpe, xhr){

                // percent for each bar
                this.show((this.sent + rpe.loaded) * 100 / this.total, rpe.loaded * 100 / rpe.total);

                // info to show during upload
                noswfupload.text(this.dom.info, "Uploading: " + this.file.fileName);

                // fileSize is -1 only if browser does not support file info access
                // this if splits recent browsers from others
                if(this.file.fileSize !== -1){

                    // simulation property indicates when the progress event is fake
                    if(rpe.simulation)
                        // in this case sent data is fake but we still have the total so we could show something
                        noswfupload.text(this.dom.info,
                            "Uploading: " + this.file.fileName,
                            "Total Sent: " + noswfupload.size(this.sent + rpe.loaded) + " of " + noswfupload.size(this.total)
                        );
                    else
                        // this is the best case scenario, every information is valid
                        noswfupload.text(this.dom.info,
                            "Uploading: " + this.file.fileName,
                            "Sent: " + noswfupload.size(rpe.loaded) + " of " + noswfupload.size(rpe.total),
                            "Total Sent: " + noswfupload.size(this.sent + rpe.loaded) + " of " + noswfupload.size(this.total)
                        );
                } else
                    // if fileSIze is -1 browser is using an iframe because it does not support
                    // files sent via Ajax (XMLHttpRequest)
                    // We can still show some information
                    noswfupload.text(this.dom.info,
                        "Uploading: " + this.file.fileName,
                        "Sent: " + (this.sent / 100) + " out of " + (this.total / 100)
                    );
            };

            // generated if there is something wrong during upload
            wrap.onerror = function(){
                // just inform the user something was wrong
                noswfupload.text(this.dom.info, "WARNING: Unable to upload " + this.file.fileName);
            };

            // generated when every file has been sent (one or more, it does not matter)
            wrap.onload = function(rpe, xhr){
                var self = this;
                // just show everything is fine ...
                noswfupload.text(this.dom.info, "Upload complete");

                // ... and after a second reset the component
                setTimeout(function(){
                    self.clean();   // remove files from list
                    self.hide();    // hide progress bars and enable input file

                    noswfupload.text(self.dom.info, "");

                    // enable again the submit button/element
                    submit.removeAttribute("disabled");
                }, 1000);
            };

        };
        </script>
    </head>
    <body>
        <h1>noSWFUpload Demo Page</h1>
        <div class="form">
            <form method="post" action="filereceiver.php" enctype="multipart/form-data">
                <div>
                    <input type="file" name="test" />
                    <input class="submit" type="submit" value="Upload File" />
                </div>
            </form>
        </div>
        <h2>(C) Andrea Giammarchi - <a href="#">WebReflection</a></h2>
        <h3><a href="#">noSWFUpload Project Page</a></h3>
        <p>
            <a href="http://validator.w3.org/check?uri=referer"><img
                src="http://www.w3.org/Icons/valid-xhtml11-blue"
                alt="Valid XHTML 1.1" height="31" width="88" /></a>
            <a href="http://jigsaw.w3.org/css-validator/check/referer"><img
                style="border:0;width:88px;height:31px"
                src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
                alt="Valid CSS!" />
            </a>
        </p>
    </body>
</html>