DEV Community

Tania
Tania

Posted on

1

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

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Best practices for optimal infrastructure performance with Magento

Running a Magento store? Struggling with performance bottlenecks? Join us and get actionable insights and real-world strategies to keep your store fast and reliable.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️