EN
JavaScript - upload dynamically file with iframe and php server
11 points
In this article, we would like to show you how to upload files dynamically with iframe in JavaScript.

upload.htm
file:
xxxxxxxxxx
1
<html>
2
<head>
3
<script>
4
5
window.Uploader = function(form, frame) {
6
var self = this;
7
8
if (form.getAttribute('target') !== frame.getAttribute('name')) {
9
throw new Error('Form is not linked with target frame.');
10
}
11
12
frame.addEventListener('load', function() {
13
frame.contentWindow.onsuccess = function(message) {
14
form.reset();
15
if (self.onsuccess) {
16
self.onsuccess(message);
17
}
18
};
19
frame.contentWindow.onerror = function(message) {
20
if (self.onerror) {
21
self.onerror(message);
22
}
23
};
24
});
25
26
frame.addEventListener('error', function() {
27
if (self.onerror) {
28
self.onerror('Loading error.');
29
}
30
});
31
};
32
33
</script>
34
</head>
35
<body>
36
<form id="upload-form" action="backend.php" target="upload-frame" method="POST" enctype="multipart/form-data">
37
<input type="file" name="file" />
38
<input type="submit" value="Submit" />
39
</form>
40
<iframe id="upload-frame" name="upload-frame" style="display:none;">
41
</iframe>
42
<div id="upload-result"></div>
43
<script>
44
45
var form = document.querySelector('#upload-form');
46
var frame = document.querySelector('#upload-frame');
47
var result = document.querySelector('#upload-result');
48
49
var uploader = new Uploader(form, frame);
50
51
uploader.onsuccess = function(message) {
52
result.innerHTML = '<div style="color: green;">'
53
+ 'Success: ' + message
54
+ '</div>';
55
};
56
57
uploader.onerror = function(message) {
58
result.innerHTML = '<div style="color: red;">'
59
+ 'Error: ' + message
60
+ '</div>';
61
};
62
63
</script>
64
</body>
65
</html>
backend.php
file:
xxxxxxxxxx
1
<html>
2
<body>
3
<script>
4
5
function execute() {
6
function action() {
7
if (window.onsuccess && window.onerror) { // if event methods appeared
8
<?php
9
10
define('DST_DIR', 'C:\\wamp64\\www\\uploaded_files\\');
11
12
if($_SERVER['REQUEST_METHOD'] === 'POST')
13
{
14
if(isset($_FILES['file']))
15
{
16
$file = $_FILES['file'];
17
18
if(empty($file['name']))
19
echo "window.onerror('File does not exist!');";
20
21
else
22
{
23
$src_path = $file['tmp_name'];
24
$dst_path = DST_DIR . $file['name'];
25
26
if(move_uploaded_file($src_path, $dst_path))
27
echo "window.onsuccess('File upload completed.');";
28
29
else
30
echo "window.onerror('File move error!');";
31
}
32
}
33
else
34
echo "window.onerror('File does not exist!');";
35
}
36
else
37
echo "window.onerror('Unsupported request method!');";
38
39
?>
40
} else {
41
execute();
42
}
43
}
44
45
setTimeout(action, 100);
46
}
47
48
execute();
49
50
</script>
51
</body>
52
<html>
Notes:
upload.htm
andbackend.php
should be both places on same php server- directory path
C:\wamp64\www\uploaded_files\
should be changed to own path - do not forget to put backslash at the end of path and have permission for files writing there