HTML File Upload Example JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript HTML | Written & Updated By - Anjali
In this article we will show you the solution of HTML file upload example JavaScript, in an HTML page, if we upload a file, we can save the uploaded file using the JavaScript fetch API method. In JavaScript, the Fetch() API is a promise-based API.
By this, we can use the GET method, POST method, etc. In this tutorial, we are going to use the POST method.
Step By Step Guide On HTML File Upload Example JavaScript :-
At first, we will see an example to save data from an HTML file upload example JavaScript. Let us see the code first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> html file upload example javascript </title>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
font-family : 'Lucida Sans' , 'Lucida Sans Regular' , 'Lucida Grande' , 'Lucida Sans Unicode' , Geneva , Verdana , sans-serif ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> html file upload example javascript </h3>
<form id="form">
<input type="file" id="file" accept=".jpg, .png, .pdg, .doc"> <br>
<input type="text" id="comments" placeholder="file comments"> <br>
<button type="submit">
upload file
</button>
</form>
<script>
document.getElementById('form').addEventListener('sumbit', function(){
e.preventDefault() ;
const userFile = document.getElementById('file').files[0] ;
const userComments = document.getElementById('comments').value;
const formData = new FormData();
formData.append('user-file' , userFile, 'user-file.jpg')
formData.append('user-comments' , userComments)
fetch('https://httpbin.org/post' , {
method: "POST",
body: formData,
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err)) ;
})
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create a form using <form> tag with the id ‘form’
- Now create a <input> tag (for the file) with the id ‘file’, type ‘file’, and also mention which type file it can accept. Again create a <input> tag (for the comment) with the id ‘comment’, type ‘file’ and the placeholder to.
- Create a <button> with type ‘submit’
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- By selecting id ‘form’ use Document.getElementById() with .addEventListener() tag.
- Into a function(), use a e.preventDefault() for prevent default.
- Create two constant variable for userFile and userComments with document.getElementById()
- By creating another variable formData for new FormData.
- Using .append operator.
- Using fetch API here.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, HTML file upload example JavaScript.
I hope this article on HTML file upload example JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
