forked from New-Bamboo/example-ajax-upload
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample_html5_upload.rb
101 lines (85 loc) · 2.27 KB
/
example_html5_upload.rb
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
require 'sinatra'
require 'pp'
get '/' do
HTML_CODE
end
post '/' do
file = params['our-file']
details = {
:filename => file[:filename],
:type => file[:type],
:head => file[:head],
:name => file[:name],
:tempfile_path => file[:tempfile].path,
:tempfile_size => file[:tempfile].size,
}
''.tap{|output| PP.pp(details, output) }
end
#
# Javascript code
#
JS_CODE =<<-JS
document.getElementById('form-id').onsubmit = function (evt) {
var form = document.getElementById('form-id');
var formData = new FormData(form);
var action = form.getAttribute('action');
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener('loadstart', onloadstartHandler, false);
xhr.upload.addEventListener('progress', onprogressHandler, false);
xhr.upload.addEventListener('load', onloadHandler, false);
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
xhr.open('POST', action, true);
xhr.send(formData); // Simple!
return false;
function onloadstartHandler(evt) {
var div = document.getElementById('upload-status');
div.innerHTML = 'Upload started!';
}
function onloadHandler(evt) {
var div = document.getElementById('upload-status');
div.innerHTML = 'Upload successful!';
}
function onprogressHandler(evt) {
var div = document.getElementById('progress');
var percent = evt.loaded/evt.total*100;
div.innerHTML = 'Progress: ' + percent + '%';
}
function onreadystatechangeHandler(evt) {
var status = null;
try {
status = evt.target.status;
}
catch(e) {
return;
}
if (status == '200' && evt.target.responseText) {
var result = document.getElementById('result');
result.innerHTML = '<p>The server saw it as:</p><pre>' + evt.target.responseText + '</pre>';
}
}
}
JS
#
# HTML code
#
HTML_CODE =<<-HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ajax upload form</title>
</head>
<body>
<form action="/" method="post" enctype="multipart/form-data" id="form-id">
<input id="file-id" type="file" name="our-file" />
<input type="submit" value="Upload!" />
<script>
#{JS_CODE}
</script>
<p id="upload-status"></p>
<p id="progress"></p>
<pre id="result"></pre>
</form>
</body>
</html>
HTML