Updated April 17, 2023
Introduction to Query Ajax image upload
- jQuery Ajax image upload is a procedure to upload images in Ajax using the JQuery language. It is a web application procedure to upload images in a database using the Ajax system.
- The input file and image inserts in the server using jQuery language and Ajax server. This operation helps to insert and save the image file in the server and interact with the web application.
- It is a web application procedure that works with front-end technology for an operating image file in the database. The image upload procedure operates database file which is in image format for interacting users and web pages using jQuery Ajax technology.
jQuery Ajax image upload overview
- Create the following files and folders for the uploading image using the JQuery Ajax method.
- The bootstrap files, CSS files, and JQuery files contain in the “index.html” file for the input form.
- Create a form for upload images in the database.
- You can use an input tag with text type. This text type disables by default.
- The form creates a button to select images from the device.
- After, the file creates another button to upload the image files on the database.
<div class = "container-fluide">
<div>
<div id = "messages"></div>
<form method = "post" id = "imagesforform" enctype = "multipart/form-data" onSubmit = "return false;">
<div class = "form-group">
<input type = "file" name = "file" class = "file">
<div class = "input-group"> <input type = "text" class = "form-control" disabled placeholder = "Upload image here…" id = "inputfile">
<div class = "input-group-append">
<button type = "button" class = "browses btn btn-danger"> select image </button>
</div>
</div>
</div>
<div class = "form-group">
<img src = "https://placehold.it/150x150" id = "previews" class = "img-thumbnail">
</div>
<div class = "form-group">
<input type = "submit" name = "submit" value = "Upload image" class = "btn btn-primary">
</div>
</form>
</div>
</div>- Create a CSS file and use the property and its value.
- Create script tag in the “index.html” file and use jQuery code for file upload in the server.
- The jQuery creates a function to upload images on the database using the click property.
- You can create variables, functions and other methods and operations using jQuery language.
$(document).on("click", ".browses", function() { var inputfile = $(this)
.parent() .parent() .parent()
.find(".inputfile");
inputfile.trigger("click");
});
$('input[type="file"]').change(function(e) {
var inputfileName = e.target.files[0].name;
$("#inputfile").val(inputfileName);
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("previews").src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
});- Ajax sever is sending requests to the server with files.
$(document).ready(function(e) {
$("#imagesforform").on("submit", function() {
$("#messages").html('<div class="alert alert-primary">
Please wait...!</div>');
$.ajax({
type: "POST",
url: "ajax/action.ajax.php",
data: new FormData(this),
contentType: false,
cache: false,
processData: false, false
success: function(data) {
if (data == 1 || parseInt(data) == 1) {
$("#messages").html(
'<div class="alert alert-info"> image updated successfully. </div>'
);
} else {
$("#messages").html(
'<div class = "alert alert-info"> Extension try with JPG, PNG, JPEG, GIF.</div>'
);
}
},
error: function(data) {
$("#messages").html(
'<div class="alert alert-danger">There is something wrong with image upload. </div>'
);
}
});
});
});- The PHP and database function requires the uploaded image on the server.
- You can interact with databases and web applications using JQuery ajax method.
jQuery Ajax image upload
- You can create file index.html and place jQuery and ajax code with input form.
File name: index.html
<!doctype html>
<html lang = "en-US" xmlns:fb = "https://www.facebook.com/2008/fbml" xmlns:addthis = "https://www.addthis.com/help/api-spec" prefix="og: http://ogp.me/ns#" class = "no-js">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<title> upload image file using JQuery AJAX </title>
<link rel = "shortcut icon" href = "https://learncodeweb.com/demo/favicon.ico">
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity = "sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin = "anonymous">
<link rel = "stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity = "sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin = "anonymous">
</head>
<body>
<div class = "container-fluide">
<div>
<div id = "messages"></div>
<form method = "post" id = "imagesforform" enctype = "multipart/form-data" onSubmit = "return false;">
<div class = "form-group">
<input type = "file" name = "file" class = "file">
<div class = "input-group"> <input type = "text" class = "form-control" disabled placeholder = "Upload image here…" id = "inputfile">
<div class = "input-group-append">
<button type = "button" class = "browses btn btn-danger"> select image </button>
</div>
</div>
</div>
<div class = "form-group">
<img src = "https://placehold.it/150x150" id = "previews" class = "img-thumbnail">
</div>
<div class = "form-group">
<input type = "submit" name = "submit" value = "Upload image" class ="btn btn-primary">
</div>
</form>
</div>
</div>
<script src = "https://code.jQuery.com/jQuery-3.2.1.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"> </script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js">
</script>
<script>
$(document).on("click", ".browses", function() { var inputfile = $(this)
.parent() .parent() .parent()
.find(".inputfile");
inputfile.trigger("click");
});
$('input[type = "file"]').change(function(e) {
var inputfileName = e.target.files[0].name;
$("#inputfile").val(inputfileName);
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("previews").src = e.target.result;
};
reader.readAsDataURL(this.files[0]);
});
$(document).ready(function(e) {
$("#imagesforform").on("submit", function() {
$("#messages").html('<div class = "alert alert-primary">
Please wait...!</div>');
$.ajax({
type: "POST",
url: "ajax/action.ajax.php", data: new FormData(this),
contentType: false, cache: false,
processData: false, false
success: function(data) { if (data == 1 || parseInt(data) == 1) {
$("#messages").html(
'<div class="alert alert-info"> image updated successfully. </div>'
);
} else {
$("#messages").html(
'<div class="alert alert-info">Extension not good only try with JPG, PNG, JPEG, GIF.</div>'
);
}
},
error: function(data) {
$("#messages").html(
'<div class="alert alert-danger"><i class="fa fa-exclamation-triangle"></i> There is something wrong.</div>'
);
}
});
});
});
</script>
</body>
</html>The output of the initial page
Description:
- Here, you see the form to upload an image for the server.
- This form creates using HTML, JQUERY, and AJAX technology.
Output after uploading an image
Description:
- After selecting the image by “input” tag and click the “upload image” button. you get a reply from the input form.
- The input tag shows the image name in the text type tag.
- The image displays after the form or tag of the web page.
Conclusion
The jQuery Ajax image upload creates an attractive, user-friendly web application with image files. This function interacts with users easily and uploads an image in less code.
Recommended Articles
This is a guide to jQuery Ajax image upload. Here we discuss the definition, overview, examples with code implementation for better understanding. You may also have a look at the following articles to learn more –
