Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    submitting the form upon file selection

    Hello

    I have a form with several input tags. One of them is a type=file tag.
    I would like the form to be submitted automatically as soon as the user chooses a file.

    I tried to change the appearance of the file input but making it invisible, and placing a regular button on top of it. upon the onclick of the button I invoked:"document.myForm.file.click"
    This seemed to open the file dialog. will this solution work?
    I heard that for security reason, the file input tag cannot be overriden.

    Here is a sample of my code:
    Code:
    <form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
      <input type="file" id="file" name="file" style="display:none" onchange="this.form.submit()">
      <input type="button" value="click to pick a file" onclick="this.form.file.click();">
      <input type="text" name="text">
      <input type="submit" value="submit">
    </form>
    The user will have two ways of submitting the form:
    * clicking the 'submit' button
    * selecting a file using the file selector - this should automatically submit the form.

    The problem is the when I choose a file, I get a JavaScript error saying: access is denied.

    I would like also to make sure that the user can only select files of a certain extension from the file select dialog. i.e; image/jpeg, image/png, image/gif
    Is there a way of setting those extensiosn for the file dialog?
    I heard about the accept attribute, but read somewhere that it is ignored by the browser.

    thanks

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    No need to complicate things, this should work fine:

    <form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
    <input type="file" id="file" name="file" onchange="this.form.submit()">
    <input type="submit" value="submit">
    </form>

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is there a way to restrict the file types that the user can choose from in the file dialog window?

    I can always check the extension of the file after the file gets selected, but I would like to be able to set the valid extensions that the user will be able to pick FROM.

    If this is possible

    thanks

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    And for your second question something like this ought to get you thinking about an actual solution to your problem:

    PHP Code:

    <script type="text/javascript">
    function 
    check_pic(val,frm){
        if(!/[^/].(?:
    gif|jpeg|jpg|png|bmp)/i.test(val)){
            
    alert("Please select an image with one of the following extentiosn:\n\n   gif, jpeg, jpg, png, bmp");
        }else{
            
    frm.submit()
        }
    }
    </script>

    <form name="myForm" method="post" action="target.php" enctype="multipart/form-data">
      <input type="file" id="file" name="file" onchange="check_pic(this.value,this.form)">
      <input type="submit" value="submit">
    </form> 


  •  

    Posting Permissions

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