LanceZhang’s Blog

Dear friends, Welcome to my blog.

Preview and check Image info before upload

That will only work in IE:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&#8221;>
<html xmlns=”http://www.w3.org/1999/xhtml&#8221;>
<head>
    
<title>validate before upload by Lance Zhang</title>
</head>
<body style=”font-family:Calibri”>
    
<form name=”Myform”>
    
<p>
        
<font color=”red” size=”6″>File type :gif,jpg,jpeg,png,bmp</font></p>
    
<p>
        File Size limit:
        
<input type=”text” size=”4″ value=”100″ name=”fileSizeLimit” id=”fileSizeLimit” />
        K
</p>
    
<p>
        Image Height Limit: 
<input type=”text” size=”4″ value=”100″ name=”heightLimit” id=”heightLimit” />
    
</p>
    
<p>
        Image Width Limit: 
<input type=”text” size=”4″ value=”100″ name=”widthLimit” id=”widthLimit” />
    
</p>
    
<p>
        
<input type=”file” name=”photo” onchange=”changeSrc(this)” />
        Image Preview
<img src=”about:blank” id=”fileChecker” name=”fileChecker” alt=”test” />
    
</p>
    
<p>
        
<input type=”submit” value=”submit”>
    
</p>
    
</form>

    <script type=”text/javascript”>
      
function   CheckFileSize()   
      { 
        
var limit = document.getElementById(fileSizeLimit).value * 1024;
        
var width = document.getElementById(widthLimit).value ;
        
var height = document.getElementById(heightLimit).value;
     
        
if (oFileChecker.fileSize > limit)
        {
            alert(
FileSize :+oFileChecker.fileSize+byte–too large!);
        }
        
else
        {
            alert(
FileSize :+oFileChecker.fileSize+byte–ok);
        }
     
        
if(  oFileChecker.height> height)
        {
            alert(
ImageHeight :+oFileChecker.height+–too height!);
        }
        
else
        {
            alert(
ImageHeight :+oFileChecker.height+–ok);
        }
        
if(oFileChecker.width> width)
        {
            alert(
ImageWidth :+oFileChecker.width+–too width!);
        }
        
else
        {
            alert(
ImageWidth :+oFileChecker.width+–ok);
        }
            
return false;   
      } 
      
      
var right_type=new Array(.gif,.jpg,.jpeg,.png,.bmp);

      var oFileChecker = document.getElementById(fileChecker);

     function changeSrc(filePicker)
     { 
        
if(!checkImgType(filePicker.value))
        {
            alert(
the file type is not correct);
            
return;
        }
        oFileChecker.src 
= filePicker.value;
     }

    oFileChecker.onreadystatechange = function ()
    { 
        
if (oFileChecker.readyState == complete)
        {
            CheckFileSize();
        }
    }

    function checkImgType(fileURL)
    {
        
var right_typeLen=right_type.length;
        
var imgUrl=fileURL.toLowerCase();
        
var postfixLen=imgUrl.length;
        
var len4=imgUrl.substring(postfixLen4,postfixLen);
        
var len5=imgUrl.substring(postfixLen5,postfixLen);
        
for (i=0;i<right_typeLen;i++)
        {
            
if((len4==right_type[i])||(len5==right_type[i]))
            {
                
return true;
            }
        }
    }

</script>

</body>
</html>

February 16, 2009 - Posted by | Code and Solution, JavaScript |

7 Comments »

  1. Just passing by.Btw, you website have great content!

    _________________________________
    Making Money $150 An Hour

    Comment by Mike | March 1, 2009 | Reply

  2. Great script and website content!!!
    But it goes only in IE.
    How can I run it on Firefox or others browser?
    Thanks
    Par

    Comment by parohmford | March 31, 2009 | Reply

  3. Sorry, but this will only work in IE, and as far as I know, there is no solution for other browsers, because of the security issue.

    Comment by Lance Zhang | April 8, 2009 | Reply

  4. I don’t know If I said it already but …Excellent site, keep up the good work. I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog. Thanks,🙂

    A definite great read….

    Comment by BloggerDude | October 9, 2009 | Reply

  5. Your site was extremely interesting, especially since I was searching for thoughts on this subject last Thursday.

    I’m Out! 🙂

    Comment by online stock trading advice | January 11, 2010 | Reply

  6. it is not working with master page in asp.net ..
    can you do some thing for that..
    thanks

    Comment by Akash | April 26, 2010 | Reply

  7. Аспирантура

    Comment by Attaifiem | September 28, 2010 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: