Judul : How to pass image file with text to PHP using Ajax
link : How to pass image file with text to PHP using Ajax
How to pass image file with text to PHP using Ajax
(1)write code for index.php file:
<!doctype html>
<html lang="en">
<head>
<title>Image Preview before Upload Demo - BY OM SIR</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function (event) {
// triggered when the form submitted
$("#selected_image").on('submit',(function(event) {
event.preventDefault();
$("#upload_status").empty();
$.ajax({
// URL to move the uploaded image file to server
url: "upload.php",
// Request type
type: "POST",
// To send the full form data
data: new FormData(this),
contentType: false,
processData:false,
// UI response after the file upload
success: function(data)
{
$("#upload_status").html(data);
}
});
}));
// Triggered when the image changed (browse)
// Function to show the image as a preview
});
</script>
</head>
<body>
<label>Select Image to Upload</label>
<form id="selected_image" action="" method="post" enctype="multipart/form-data">
<input type="file" name="image_file" style="width:250px;"/>
<input type=text name=myname>
<input type="submit" value="Upload" />
</form>
<div id="upload_status"></div>
</body>
</html>
(2)write code for upload.php file:
<?php
if(isset($_FILES["image_file"]["type"]))
{
$uploadedImgFileExtension = $_FILES["image_file"]["type"];
$uploadedImgFileSize = $_FILES["image_file"]["size"];
$myname=$_POST['myname'];
// checking the image file types and size
if(( ($uploadedImgFileExtension=="image/png") || ($uploadedImgFileExtension=="image/gif") || ($uploadedImgFileExtension=="image/jpg") || ($uploadedImgFileExtension=="image/jpeg")) ) {
// Name of the uploaded file
$uploadedImgFileName =$_FILES['image_file']['name'];
if (file_exists("upload/" . $uploadedImgFileName)) {
echo $uploadedImgFileName . " Exists already ";
}
else
{
// Temporary path to store the uploaded image
$tempPath = $_FILES['image_file']['tmp_name'];
// destination folder name where the uploaded image need to be moved
$moveFileTo = "uploads/";
$destFullPath = $moveFileTo.$uploadedImgFileName;
// Moving the uploaded image file
$isMoved = move_uploaded_file($tempPath,$destFullPath) ;
if ($isMoved == true) {
echo "Image Uploaded Successfully";
echo "my name is ". $myname;
echo "<br/><b>Name:</b> " . $uploadedImgFileName . "<br>";
echo "<b>Type:</b> " . $uploadedImgFileExtension . "<br>";
echo "<b>Size:</b> " . ($uploadedImgFileSize / 1024) . " kB<br>";
} else {
echo "ERROR: File not moved correctly";
}
}
}
else
{
echo "Invalid Image File";
}
}
?>
output:
<!doctype html>
<html lang="en">
<head>
<title>Image Preview before Upload Demo - BY OM SIR</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.11.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function (event) {
// triggered when the form submitted
$("#selected_image").on('submit',(function(event) {
event.preventDefault();
$("#upload_status").empty();
$.ajax({
// URL to move the uploaded image file to server
url: "upload.php",
// Request type
type: "POST",
// To send the full form data
data: new FormData(this),
contentType: false,
processData:false,
// UI response after the file upload
success: function(data)
{
$("#upload_status").html(data);
}
});
}));
// Triggered when the image changed (browse)
// Function to show the image as a preview
});
</script>
</head>
<body>
<label>Select Image to Upload</label>
<form id="selected_image" action="" method="post" enctype="multipart/form-data">
<input type="file" name="image_file" style="width:250px;"/>
<input type=text name=myname>
<input type="submit" value="Upload" />
</form>
<div id="upload_status"></div>
</body>
</html>
(2)write code for upload.php file:
<?php
if(isset($_FILES["image_file"]["type"]))
{
$uploadedImgFileExtension = $_FILES["image_file"]["type"];
$uploadedImgFileSize = $_FILES["image_file"]["size"];
$myname=$_POST['myname'];
// checking the image file types and size
if(( ($uploadedImgFileExtension=="image/png") || ($uploadedImgFileExtension=="image/gif") || ($uploadedImgFileExtension=="image/jpg") || ($uploadedImgFileExtension=="image/jpeg")) ) {
// Name of the uploaded file
$uploadedImgFileName =$_FILES['image_file']['name'];
if (file_exists("upload/" . $uploadedImgFileName)) {
echo $uploadedImgFileName . " Exists already ";
}
else
{
// Temporary path to store the uploaded image
$tempPath = $_FILES['image_file']['tmp_name'];
// destination folder name where the uploaded image need to be moved
$moveFileTo = "uploads/";
$destFullPath = $moveFileTo.$uploadedImgFileName;
// Moving the uploaded image file
$isMoved = move_uploaded_file($tempPath,$destFullPath) ;
if ($isMoved == true) {
echo "Image Uploaded Successfully";
echo "my name is ". $myname;
echo "<br/><b>Name:</b> " . $uploadedImgFileName . "<br>";
echo "<b>Type:</b> " . $uploadedImgFileExtension . "<br>";
echo "<b>Size:</b> " . ($uploadedImgFileSize / 1024) . " kB<br>";
} else {
echo "ERROR: File not moved correctly";
}
}
}
else
{
echo "Invalid Image File";
}
}
?>
output:
Demikianlah Artikel How to pass image file with text to PHP using Ajax
Sekianlah artikel How to pass image file with text to PHP using Ajax kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel How to pass image file with text to PHP using Ajax dengan alamat link https://othereffect.blogspot.com/2016/12/how-to-pass-image-file-with-text-to-php.html
0 Response to "How to pass image file with text to PHP using Ajax "
Post a Comment