DEV Community

Tania
Tania

Posted on

How to display uploaded file in html using JavaScript

How to display uploaded file in html using JavaScript

Today we will see how to upload files in html using JavaScript. You must know about html. html is a markup language from which you can design the content of a website and manage the layout of the website in css. And then javascript is used for programming the website. javascript is completely HTML code. Can change. If there is any file of JavaScript, we can change it in HTML. There are many other programming languages ​​but JavaScript is very easy to learn. A developer should have a complete knowledge of JavaScript. They are creating a website. Php which is server site language but Java browser site. Where client is browsing the website. JavaScript can communicate in many languages. It does not require compiler. JavaScript only runs in browsers. In JavaScript you can also work with databases. Let's see some examples.
Example code:

<input type="file"  accept="image/*" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
 for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="Output" width="100" /></p>

<script>
var loadFile = function(event) {
    var image = document.getElementById('Output');
    image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)