How to upload file with ajax jquery : Simplest method
Tags: javascript, webdev, programming, tutorial
Published: 2022-07-22 08:06:04

## Output

![upload image with ajax jquery - bepractical.tech](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6koqnwa5rwspifysrx1r.gif)

Hey developers , in this tutorial you will learn how to upload file using AJAX Jquery . Basically ajax is a method to send request in backend with reloading the whole page .

Storing an image file in backend requires an file input in html , some styling with css and if you want some animations you can use Javascript .

Jquery is a javascript library , it is mainly used for DOM and ajax is a jquery method used to send request in backend . In javascript ajax is known as xmlHttpRequest .

## Contents

1. HTML
2. CSS
3. jquery
4. PHP
5. Conclusion

## HTML File

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<title>Upload file</title>
</head>
<body>
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center" >
            <div class="col-md-6 my-5 d-flex justify-content-start align-items-center flex-column" >
                <img src="" alt="" class = "mb-3 show_image" />
                <div class="file_upload">
                    <input type="file" name="file" id="fileInput">
                    <button class = "uploadButton" >Upload</button>
                </div>
            </div>
        </div>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
In the above code block `img` tag is used to show the uploaded image file , and <input> tag is used to choose for image file to be uploaded .

## CSS File

```
.row{
    width:100%;
}
.col-md-6{
    width:500px;
    height:300px;
    border-radius: 10px;
    overflow: hidden;
}
img{
    width:95%;
    height:80%;
}
```

Write the above code in a seprate css file and link it with the html file .

## Jquery code

Before writing jquey code , include jquery’s cdn link into your html file 

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```

Then after write the below jquery code in `script` tag below jquery linkage into your html file.

```
$(document).ready(function(){

        $(".uploadButton").click(function(){

            var fd = new FormData();
            var files = $('#fileInput')[0].files;
            // console.log(files);
            // Check file selected or not
            if(files.length > 0 ){
                fd.append('file',files[0]);

                $.ajax({
                    url: 'upload.php',
                    type: 'post',
                    data: fd,
                    success: function(response){
                        if(response){
                            $(".show_img").attr("src",response); 
                        }else{
                            console.log('file not uploaded');
                        }
                    },
                });
            }else{
                alert("Please select a file.");
            }
        });
    });
```

In the above jquery code we have used `FormData()` to upload file in backend . After successful uploading of file we are showing it into image tag .

Read Full Article here 👉 https://bepractical.tech/how-to-upload-file-with-ajax-jquery-simplest-method/