javascript - jQuery to submit form on file selection not working - Stack Overflow

admin管理员组

文章数量:1352184

I am trying to initiate upload of a file as soon as the user selects the file. The form should disappear replaced by the "Uploading your picture..." message.

So far, all I get is the form being hidden (and message showing), but the upload is not happening. The form is not being submitted. Any ideas why?

This is the JS

<script>
$(function(){
    $("#file_select").change(function(){
        $(this).parents("#upload_form").submit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });
});
</script>

and the HTML

    <div class="float_left" id="upload_form_div"> 
        <h3>Select a picture for your profile (4 MB max):</h3> 
        <form action="" 
            id="upload_form" 
            enctype="multipart/form-data" 
            method="post" accept-charset="utf-8">

            <input type="file" name="userfile" 
                   id="file_select" /> 
             <input type="hidden" name="upload" value="upload" /> 

         <button id="submit" type="submit"><img height="24" width="24"
                   alt="Upload" src="images/icons/small/white/bended%20arrow%20right.png"> 
                    <span>Upload</span> 
              </button> 
        </form>

        <form action="" 
              method="post" accept-charset="utf-8">
        <button type="submit"><img height="24" width="24" 
             alt="Remove" src="images/icons/small/white/trashcan.png"> 
            <span>Remove</span> 
        </button> 
        </form>
</div> 
  <div id="loading" style="display:none;"> 
         Uploading your picture...
   </div>

I am trying to initiate upload of a file as soon as the user selects the file. The form should disappear replaced by the "Uploading your picture..." message.

So far, all I get is the form being hidden (and message showing), but the upload is not happening. The form is not being submitted. Any ideas why?

This is the JS

<script>
$(function(){
    $("#file_select").change(function(){
        $(this).parents("#upload_form").submit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });
});
</script>

and the HTML

    <div class="float_left" id="upload_form_div"> 
        <h3>Select a picture for your profile (4 MB max):</h3> 
        <form action="http://example./profile/upload_picture" 
            id="upload_form" 
            enctype="multipart/form-data" 
            method="post" accept-charset="utf-8">

            <input type="file" name="userfile" 
                   id="file_select" /> 
             <input type="hidden" name="upload" value="upload" /> 

         <button id="submit" type="submit"><img height="24" width="24"
                   alt="Upload" src="images/icons/small/white/bended%20arrow%20right.png"> 
                    <span>Upload</span> 
              </button> 
        </form>

        <form action="http://example./profile/remove_picture" 
              method="post" accept-charset="utf-8">
        <button type="submit"><img height="24" width="24" 
             alt="Remove" src="images/icons/small/white/trashcan.png"> 
            <span>Remove</span> 
        </button> 
        </form>
</div> 
  <div id="loading" style="display:none;"> 
         Uploading your picture...
   </div>

• javascript
• jquery
• forms
• form-submit

Share Improve this question Follow edited Apr 21, 2011 at 12:29 pepe asked Apr 21, 2011 at 4:13 pepepepe 9,9092525 gold badges117117 silver badges192192 bronze badges 1

• 1 I added to my answer below - solved the problem for me here: jsfiddle/q3J4R – willoller Commented Apr 21, 2011 at 15:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

It probably has something to do with this part:

 <input type="file" name="userfile" 
               value="onchange=&quot;return validateFileExtension(this)&quot;"
               id="file_select" /> 

An input type=file should not have a value= attribute (and even if it did, you shouldn't put javascript in there!)

You also have some javascript in the form:

onsubmit="return validateFileExtension(this.userfile)" 

If the function validateFileExtension() returns false then the form will not submit. However, the way you have written the jQuery means that the message will still appear.

---

EDIT:

Change the id on your submit button to something other than "submit".

In the jQuery docs:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a plete list of rules and to check your markup for these problems, see DOMLint.

---

HOWEVER:

You should consider @Abdul's solution, since the working submit will take you away from your message.

If you are using CodeIgniter and you don't want to use Ajax, you should consider using the flash functionality to display the message to the user after the form submits.

You should think of using jquery form plugin to submit your form and jquery validate plugin to validate your form for file extensions and everything.Jquery form plugin submits your form using ajax. In that way you won't be redirected to form action. Also if you want you can consider using jquery dialog to display the result.

 $("#upload_form").validate({
          rules: {
        MyFile: {
          required: false,
          accept: "jpg|jpeg|png|gif"

        }
      }
    });


  $("#file_select").change(function(){
       ("#upload_form").ajaxSubmit();
        $("#upload_form_div").hide();
        $("#loading").show();
    });

Submit form on file selection and validate for CSV file input

 $('#file').change($('form').submit());
 $('form').submit(function(){
    if($('#file').val().toLowerCase().indexOf('.csv') != -1){
      $('#spinner').show();
      return true;
    }
    else{
      alert('Invalid File format. Please, upload CSV file')
      return false;
    }
  });

本文标签： javascriptjQuery to submit form on file selection not workingStack Overflow