SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: file extension?

  1. #1
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    file extension?

    I allow people to upload images onto my web server. I want to verify each image is less than 50Kb and is an image type, this is what I came up with
    Verifying the files extension

    <script language="javascript" type="text/javascript">
    extArray = new Array(".gif", ".jpeg", ".jpg", ".png", ".bmp");
    function LimitAttach(form, file) {
    allowSubmit = false;
    if (!file) return;
    while (file.indexOf("\\") != -1)
    file = file.slice(file.indexOf("\\") + 1);
    ext = file.slice(file.indexOf(".")).toLowerCase();
    for (var i = 0; i < extArray.length; i++) {
    if (extArray[i] == ext) { allowSubmit = true; break; }
    }
    if (allowSubmit) return true;
    else
    alert("Please only upload files that end in types: "
    + (extArray.join(" ")) + "\nPlease select a new "
    + "file to upload and submit again.");
    return false;
    }
    </script>
    and I put this on my submit button
    HTML Code:
    onclick='return LimitAttach(this.form, this.form.Image.value)'
    How do I change this if I have 6 fields in an array(Image[])
    "Oh, and Jenkins--apparently your mother died this morning."

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See this thread. Note that this will only work in IE with ActiveX enabled.

    About your Array question, what do you wanna do? Add another extension type?

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The only cross browser way of checking the file size is to do it on the server after uploading and before moving it to its permanent location from the temporary location it is initially uploaded to.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    K, the file size is solved using this in my form
    HTML Code:
    <input type="hidden" name="MAX_FILE_SIZE" value="51200"> 
    So, I'm only going to check the files extension. I only want to allow images (.bmp, jpg, .jpeg, .png, .tiff) to be uploaded. The images to be uploaded via my form are coded like this,
    HTML Code:
    	<div class="Container">
    	<label for="Photo1" class="Photo">Image 1:</label>
    	<input type="file" id="Photo1" name="Image[1]" onKeyPress="return onkeyPress(event);" onChange="return ValidateFileExtension(this)">
    	</div>
    	<div class="Container">
    	<label for="Photo2" class="Photo">Image 2:</label>
    	<input type="file" id="Photo2" name="Image[2]" onKeyPress="return onkeyPress(event);" onChange="return ValidateFileExtension(this)">
    	</div>
    	<div class="Container">
    	<label for="Photo3" class="Photo">Image 3:</label>
    	<input type="file" id="Photo3" name="Image[3]" onKeyPress="return onkeyPress(event);" onChange="return ValidateFileExtension(this)">
    	</div>
    </div>
    <div class="Columnp">
    	<div class="Container">
    	<label for="Photo4" class="Photo">Image 4:</label>
    	<input type="file" id="Photo4" name="Image[4]" onKeyPress="return onkeyPress(event);" onChange="return ValidateFileExtension(this)">
    	</div>
    	<div class="Container">
    	<label for="Photo5" class="Photo">Image 5:</label>
    	<input type="file" id="Photo5" name="Image[5]" onKeyPress="return onkeyPress(event);" onChange="return ValidateFileExtension(this)">
    	</div>
    	<div class="Container">
    	<label for="Photo6" class="Photo">Image 6:</label>
    	<input type="file" id="Photo6" name="Image[6]" onKeyPress="return onkeyPress(event);" onChange="return ValidateFileExtension(this)">
    	</div>
    And here is the script
    <script language="javascript" type="text/javascript">
    String.prototype.getFileName = function () {
    var p, str = this.toString();
    if(0 <= (p = str.indexOf("?"))) str = str.substr(0, p);
    return str.substr(str.lastIndexOf("/")+1);
    }
    String.prototype.isImageFileExtension = function() {
    return /(\.gif)|(\.jpg)|(\.bmp)|(\.png)/i.test(this.getFileName());
    }
    function ValidateFileExtension(fld) {
    if(!fld.value.isImageFileExtension()) {
    alert("File extension must be one of: .gif, .png, .bmp or .jpg");
    fld.select();
    fld.focus();
    return false;
    }
    return true;
    </script>
    Is this ok and the right way to do this?
    }
    "Oh, and Jenkins--apparently your mother died this morning."

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wouldn't recommend you to change/extend native objects. Instead create a function that does the same.

  6. #6
    SitePoint Wizard lukeurtnowski's Avatar
    Join Date
    Mar 2003
    Location
    Coronado
    Posts
    1,618
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    native objects?
    "Oh, and Jenkins--apparently your mother died this morning."

  7. #7
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure how to solve your problem but I would warn you that the client can ignore MAX_FILE_SIZE and upload a file of any size, or they could disable JavaScript in their browser and upload any file type. You'd be better off checking this serverside. If you do it on the serverside, you can also verify that the file is actually a GIF, PNG, etc., and not just an EXE file renamed with those extensions.

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lukeurtnowski View Post
    native objects?
    Yes, native JavaScript objects, such as String, Object etc


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •