Hello,

I'm working on an upload interface that let's the user upload images. I write PHP quite well and the server side of things is finished, including validation. I'm now working on the actual upload page itself but I'm new to Javascript and I'm sort of making it up as I go along...

I want my javascript to do 3 things:

  • Style the upload interface to look great, or at least be styleable.
  • Check the file size (client side).
  • Check the file extension (client side).


Using a great script from Viget I'm making headway on point 1, and I've added in some checks for point 2 and 3. The issue I'm having is that if you select a file with the incorrect extension, it warns you, but then if you select a new file, the warning remains. This happens vice versa, so if you add a file that's got the correct file extension, but then change to one with a bad file extension, it doesn't warn you. So I can't get the javascript to "refresh".

If you could have a look at this code and make any comments, any comments at all, I'd really appreciate it as I'm very new to this:

(even layout comments would be appreciated)
(the code below is ready to try, so just copy and paste)
Code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Image Uploader</title>

<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
        var SITE = SITE || {};
        SITE.fileInputs = function() {
        var $this = $(this),
        $val = $this.val(),
        valArray = $val.split('\\'),
        newVal = valArray[valArray.length-1],
        $button = $this.siblings('.button'),
        $fakeFile = $this.siblings('.file-holder');
        if(newVal !== ''){
                var ext = this.files[0].name.split('.').pop(); //set the extension
                                if($fakeFile.length === 0){
                                    if(ext == 'jpg' || ext == 'JPG'  || ext == 'png'  || ext == 'PNG' || ext == 'jpeg' || ext == 'JPEG'){
                                        if(this.files[0].size < 10000000){
                                            $button.text('Image Chosen');
                                            $button.after('<span class="file-holder">' + newVal + '</span>');
                                        }else{
                                            $('#message').append("Your image is too big. Please choose a file under 10mb");
                                            $("#file").replaceWith('<input type="file" class="file" name="file" id="file" />');//reset the file input so the bad file can't be uploaded
                                        }
                                    }else{
                                        $('#message').append("The image must be a .png or a .jpg file");
                                        $("#file").replaceWith('<input type="file" class="file" name="file" id="file" />');//reset the file input so the bad file can't be uploaded
                                    }
                                }else{
                                    $fakeFile.text(newVal);
                                }
                    }
                };
        $('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs);
});
</script>

<!-- Page Style -->
<style type="text/css">
body{
        font-family:Tahoma, Geneva, sans-serif;
        font-size:12px;
        color:#333;
        line-height:17px;
}

td {
        text-align:center;
}

.file-wrapper{
        cursor: pointer;
        display: inline-block;
        overflow: hidden;
        position: relative;
}

.file-wrapper input {
        cursor: pointer;
        font-size: 100px;
        height: 100%;
        filter: alpha(opacity=1);
        -moz-opacity: 0.01;
        opacity: 0.01;
        position: absolute;
        right: 0;
        top: 0;
}

.file-wrapper .button {
        background: #79130e;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 11px;
        font-weight: bold;
        margin-right: 5px;
        padding: 4px 18px;
        text-transform: uppercase;
}

fieldset{
        border:none;
        padding:0px;
        margin:0px;
}
</style>

</head>

<body>

<div id="message"></div>

<form action="<?php echo($_SERVER['PHP_SELF']);?>" method="post" id="upload" enctype="multipart/form-data">
     <fieldset>
    <span class="file-wrapper">
    <input type="file" class="file" name="file" id="file" />
    <span class="button">Choose an Image</span>
    </span><br />
    <input type="submit" value="Upload" name="submit" class="button"/>
    </fieldset>
</form>

</body>
</html>