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:
xxxxxxxxxx1
<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:
xxxxxxxxxx1
<html>2
<body>3
<script>4
5
function execute() {6
function action() {7
if (window.onsuccess && window.onerror) { // if event methods appeared8
<?php9
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
else22
{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
else30
echo "window.onerror('File move error!');";31
}32
}33
else34
echo "window.onerror('File does not exist!');";35
}36
else37
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.htmandbackend.phpshould 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
