Home/ Questions/Q 6385137
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:51:41+00:00

I have a file upload control in asp.net which is used to upload image

  • 0

I have a file upload control in asp.net which is used to upload image file. Now what I want is I have image control so when a user uploads a file, The image from that file should be visible in the image control before it is really upload on the server. When ever user changes the file, the change should be reflected in that image control. I dont want to use any additional button other than file upload control.

Is there any way to do this with javascript??

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think thats possible in HTML5 supported browsers

    check the HTML5 FILE API http://www.w3.org/TR/FileAPI/

    This works in FF3+

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>input type=file & Firefox 3</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

</head>

<body>

<h1>This works in Firefox 3+</h1>

<script type="text/javascript">
// <![CDATA[
function inputFileOnChange() {
    if (document.getElementById('fichier').files) {
        $("#dvFileName").html(document.getElementById('fichier').files.item(0).name);
        $("#imgImage").attr("src" ,document.getElementById('fichier').files.item(0).getAsDataURL());
    };
};
// ]]>
</script>

<div>
    <input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
    <br /><br />
    <img id="imgImage" src="" width="200" height="200" alt="" />
    <div id="dvFileName">
    </div>
</div>

</body>
</html>
    • 0