You can upload files and images using PHP. Basically it can be uploaded by form submitting. For more details visit how to upload file or image using PHP. When i tried to upload images using Ajax with jQuery, i can't get it work. All of you may be face this problem. This blog describes how to upload file or image in PHP using jQuery with Ajax.
Consider the following example for upload files using Ajax and PHP.
To upload file or image, your html form should be like below form:
where,
enctype="multpart/form-data - must be present in form. Otherwise file does not upload.
type="file" in <input> tag is used to take input as a file.
Before add Ajax code to your html file, you need to add jquery-1.7.2.min.js library file. To upload image, you have to write Ajax code like below:
//reset file field after form submitted
When user click the upload button, the form is submitted, ajax is called and send form data as well.
When you view the upload-ajax.html in browser, it should be like below image:
upload.php:
Consider the following example for upload files using Ajax and PHP.
Html form for upload image:
To upload file or image, your html form should be like below form:
<form name="multiform" id="multiform" action="#" method="POST" enctype="multipart/form-data">
Image : <input type="file" name="file" id="file" /></br>
<input type="button" id="multi-post" value="Upload"></input>
</form>
Image : <input type="file" name="file" id="file" /></br>
<input type="button" id="multi-post" value="Upload"></input>
</form>
where,
enctype="multpart/form-data - must be present in form. Otherwise file does not upload.
type="file" in <input> tag is used to take input as a file.
Ajax and jQuery for upload image:
Before add Ajax code to your html file, you need to add jquery-1.7.2.min.js library file. To upload image, you have to write Ajax code like below:
$(document).ready(function(){
$("#multiform").submit(function(e) {
var formObj = $(this);
if(window.FormData !== undefined) {
var formData = new FormData(this);
$.ajax({
url: 'upload.php', //url to process the sent data
type: 'POST', //form type
data: formData, //form data to send
mimeType:"multipart/form-data", //type of form data
contentType: false, //content type of form
cache: false, //disable cache the request page
processData: false, //to send DOMDcoument or non processed data file
success: function(data, textStatus, jqXHR) {
$("#er").html(data);
},
error: function(jqXHR, textStatus, errorThrown) {
$("#er").html('textStatus=' + textStatus + ', errorThrown=' + errorThrown);
}
});
//reset file field after form submitted
$('#file').val('')
//prevent the page is refreshed
//prevent the page is refreshed
e.preventDefault();
//e.unbind();
}
});
$("#multi-post").click(function() {
//submit the form and send data
$("#multiform").submit();
});
});
When user click the upload button, the form is submitted, ajax is called and send form data as well.
Html file with Ajax for upload image:
We need to combine html form and ajax code to make a full html file for upload file or image. You may add some styles to html file in order to give attractive presence to users. After combined above all things, your html code should be like below one:
upload-ajax.html:
upload-ajax.html:
<html>
<head>
<style type="text/css">
body {
color:white;
font-size:14px;
}
.contact {
text-align:center;
background: none repeat scroll 0% 0% #8FBF73;
padding: 20px 10px;
box-shadow: 1px 2px 1px #8FBF73;
border-radius: 10px;
width:520px;
}
#file {
width: 250px;
margin-bottom: 15px;
background: none repeat scroll 0% 0% #AFCF9C;
border: 1px solid #91B57C;
height: 30px;
color: #808080;
border-radius: 8px;
box-shadow: 1px 2px 3px;
padding: 3px 4px;
}
#multi-post
{
background:none repeat scroll 0% 0% #8FCB73;
display: inline-block;
padding: 5px 10px;
line-height: 1.05em;
box-shadow: 1px 2px 3px #8FCB73;
border-radius: 8px;
border: 1px solid #8FCB73;
text-decoration: none;
opacity: 0.9;
cursor: pointer;
color:white;
}
#er {
color: #F00;
text-align: center;
margin: 10px 0px;
font-size: 17px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../test/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#multiform").submit(function(e) {
var formObj = $(this);
if(window.FormData !== undefined) {
var formData = new FormData(this);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
success: function(data, textStatus, jqXHR) {
$("#er").html('<pre><code>'+data+'</code></pre>');
},
error: function(jqXHR, textStatus, errorThrown) {
$("#er").html('textStatus=' + textStatus + ', errorThrown=' + errorThrown);
}
});
$('#file').val('')
e.preventDefault();
//e.unbind();
}
});
$("#multi-post").click(function() {
//sending form from here
$("#multiform").submit();
console.log();
});
});
</script>
<div class="contact">
<h1>Upload files using Ajax and PHP</h1>
<div id="er"></div>
<form name="multiform" id="multiform" action="#" method="POST" enctype="multipart/form-data">
Image : <input type="file" name="file" id="file" /></br>
<input type="button" id="multi-post" value="Upload"></input>
</form>
</div>
</body>
</html>
When you view the upload-ajax.html in browser, it should be like below image:
PHP snippet for upload file:
When ajax is called, url which is in ajax call received form data. Then the file or image is to be uploaded using following PHP code.
upload.php:
<?php
$file=$_FILES['file']['name'];
if($file!='')
{
//upload file
move_uploaded_file($_FILES['file']['tmp_name'],$_SERVER['DOCUMENT_ROOT'].'/test/uploaded_img/'.$file);
//check whether file is exists or not in a folder
if(file_exists($_SERVER['DOCUMENT_ROOT'].'/test/uploaded_img/'.$file)) {
echo'Uploaded successfully';
}
else {
echo'File is not uploaded';
}
}
Where,
move_uploaded_file() - used to upload the file
file_exists() - used to check whether the file is already exists in a folder or not after upload the file
$_SERVER['DOCUMENT_ROOT'] - used to represent the directory
Now you can add either file or image using PHP and jQuery with Ajax.
Related Post:
PHP - Upload file
PHP - Upload images into MySQL database
Upload multiple files or images using PHP
Retrieve images from MySQL database using PHP
PHP - Upload file
PHP - Upload images into MySQL database
Upload multiple files or images using PHP
Retrieve images from MySQL database using PHP
