Upload image at client side first_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-01 04:42 出处：网络

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 b开发者_StackOverflowe 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??

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>