CODEWITHSUNDEEP
asp.netfile-upload
Microsoft Developer
Microsoft Developer

Reputation: 5459

Upload image at client side first

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??

Upvotes: 0

Views: 804

Answers (1)

Nitin S
Nitin S

Reputation: 7601

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>

Upvotes: 2

Related Questions