get image side via client side script before file uplaod

Discussion in 'ASP .Net' started by moondaddy, Jul 15, 2004.

  1. moondaddy

    moondaddy Guest

    I need to get the size on an image client side before the client uploads it,
    and if its too large, I need to alert the client rather than doing a
    postback. The code below successfully writes the file size to the
    text-input element on the second click (attempt), but writes -1 on the first
    click. It must return the file size on the first click to be useable. Can
    anyone explain why it returns -1 on the first click and then the actual file
    size on the second click, and also can you provide a good solution to this?

    Thanks!





    <%@ Page Language="vb" AutoEventWireup="false"
    Codebehind="zzTestFileSize.aspx.vb" Inherits="Charmpix.zzTestFileSize"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <title>zzTestFileSize</title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5"
    name="vs_targetSchema">

    </HEAD>
    <body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">

    <script language="javascript" type="text/javascript">
    function fromOnChange() {
    var im;
    im = new Image();
    im.src = document.Form1.ctlFile.value;
    document.Form1.txtTest.value = im.fileSize;
    document.Form1.txtPath.value = im.src;
    }
    </script>

    <INPUT type="file" id="ctlFile" name="ctlFile"> <INPUT type="button"
    value="Button" onclick="fromOnChange()">
    <INPUT type="text" id="txtTest"> <INPUT id="txtPath" type="text">
    </form>
    </body>
    </HTML>







    --
     
    moondaddy, Jul 15, 2004
    #1
    1. Advertising

  2. You will need a client-side executable to do this, such as an ActiveX
    control or Java Applet.

    --
    HTH,
    Kevin Spencer
    ..Net Developer
    Microsoft MVP
    Big things are made up
    of lots of little things.

    "moondaddy" <> wrote in message
    news:#...
    > I need to get the size on an image client side before the client uploads

    it,
    > and if its too large, I need to alert the client rather than doing a
    > postback. The code below successfully writes the file size to the
    > text-input element on the second click (attempt), but writes -1 on the

    first
    > click. It must return the file size on the first click to be useable. Can
    > anyone explain why it returns -1 on the first click and then the actual

    file
    > size on the second click, and also can you provide a good solution to

    this?
    >
    > Thanks!
    >
    >
    >
    >
    >
    > <%@ Page Language="vb" AutoEventWireup="false"
    > Codebehind="zzTestFileSize.aspx.vb" Inherits="Charmpix.zzTestFileSize"%>
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    > <HTML>
    > <HEAD>
    > <title>zzTestFileSize</title>
    > <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    > <meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
    > <meta content="JavaScript" name="vs_defaultClientScript">
    > <meta content="http://schemas.microsoft.com/intellisense/ie5"
    > name="vs_targetSchema">
    >
    > </HEAD>
    > <body MS_POSITIONING="GridLayout">
    > <form id="Form1" method="post" runat="server">
    >
    > <script language="javascript" type="text/javascript">
    > function fromOnChange() {
    > var im;
    > im = new Image();
    > im.src = document.Form1.ctlFile.value;
    > document.Form1.txtTest.value = im.fileSize;
    > document.Form1.txtPath.value = im.src;
    > }
    > </script>
    >
    > <INPUT type="file" id="ctlFile" name="ctlFile"> <INPUT type="button"
    > value="Button" onclick="fromOnChange()">
    > <INPUT type="text" id="txtTest"> <INPUT id="txtPath" type="text">
    > </form>
    > </body>
    > </HTML>
    >
    >
    >
    >
    >
    >
    >
    > --
    >
    >
    >
     
    Kevin Spencer, Jul 15, 2004
    #2
    1. Advertising

  3. Hi Moondaddy,

    AS for image 's "fileSize" return -1 problem, I suspect that whether it is
    caused by the image object is not completely loaded. Based on my research
    ,the image object contains a member property called "complete" which
    indicate whether the image has been completely loaded or not. So I think we
    can put a "If..." statement before we get the image's fileSize for example

    if(im.complete== true)
    {
    alert(im.fileSize);
    }

    And here is a test page I've made and you can also have a test on your side
    to see whether it works.
    =================aspx page====================
    <HTML>
    <HEAD>
    <title>CheckImageSize</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema"
    content="http://schemas.microsoft.com/intellisense/ie5">
    <script language="javascript">
    var im;
    function loadImage()
    {
    im = new Image();
    im.src = document.getElementById("imgUploader").value;
    }

    function checkSize()
    {
    if(im!=null && im.complete == true)
    {
    alert(im.fileSize);
    }
    else
    {
    alert("not completely loaded!");
    }
    }
    </script>
    </HEAD>
    <body>
    <form id="Form1" method="post" runat="server">
    <table width="100%" align="center">
    <tr>
    <td>
    <INPUT id="imgUploader" type="file" onpropertychange="loadImage()">
    </td>
    </tr>
    <tr>
    <td></td>
    </tr>
    <tr>
    <td>
    <INPUT type="button" value="Check Image File Size"
    onclick="checkSize()">
    </td>
    </tr>
    </table>
    </form>
    </body>
    </HTML>
    =========================

    Thanks.

    Regards,

    Steven Cheng
    Microsoft Online Support

    Get Secure! www.microsoft.com/security
    (This posting is provided "AS IS", with no warranties, and confers no
    rights.)

    Get Preview at ASP.NET whidbey
    http://msdn.microsoft.com/asp.net/whidbey/default.aspx
     
    Steven Cheng[MSFT], Jul 16, 2004
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Magnus Blomberg
    Replies:
    3
    Views:
    730
    Magnus Blomberg
    Apr 14, 2005
  2. Boss302
    Replies:
    0
    Views:
    1,070
    Boss302
    Nov 21, 2006
  3. Replies:
    1
    Views:
    727
    Norman Yuan
    Mar 22, 2007
  4. hormuz
    Replies:
    0
    Views:
    360
    hormuz
    Jul 7, 2007
  5. Guest

    Fire server side event before client side event

    Guest, Mar 17, 2005, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    608
    Ken Cox [Microsoft MVP]
    Mar 18, 2005
Loading...

Share This Page