<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<form method="post" enctype="multipart/form-data" action="">
<input type="file" name="filename" id="filename" multiple />
<button type="submit" id="btn">Upload Files!</button>
</form>
<div id="response"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<form method="post" enctype="multipart/form-data" action="">
<input type="file" name="filename" id="filename" multiple />
<button type="submit" id="btn">Upload Files!</button>
</form>
<div id="response"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>
Simpan Dengan nama index.php
Script PHP :
<?php
foreach ($_FILES["filename"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["filename"]["name"][$key];
move_uploaded_file( $_FILES["filename"]["tmp_name"][$key], "/var/www/DMSStore/" . $_FILES['filename']['name'][$key]);
}
}
echo "<h2>Successfully Uploaded Images</h2>";
Simpan Dengan nama upload.php
Script JQuery :
(function () {
var input = document.getElementById("filename"),
formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
file = this.files[i];
if (!!file.type.match(/image.*/) || !!file.type.match(/pdf.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("filename[]", file);
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
$("#filename").val('');
}
});
}
}, false);
}());
var input = document.getElementById("filename"),
formdata = false;
if (window.FormData) {
formdata = new FormData();
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
file = this.files[i];
if (!!file.type.match(/image.*/) || !!file.type.match(/pdf.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("filename[]", file);
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
$("#filename").val('');
}
});
}
}, false);
}());
Simpan Dengan nama upload.js
No comments:
Post a Comment