submit input file only jQuery Form Plugin

Question

I am building a rather large form. At one point users can upload an image.

This image should be uploaded immediately. Then users should continue to fill out the form.

HTML

<form name="registration" id="registration" action="confirm.php" method="post">
  <input name="firstname" id="firstname" type="text" />
  <input name="lastname" id="lastname" type="text" />
  <!-- file upload -->
  <input name="file" id="file" type="file" />
  <input name="newsletter" type="checkbox" id="newsletter" />
  <input name="captcha" id="captcha" type="tel" />
</form>

Javascript (jQuery)

 //upload file on change event
 $('#file').change(function() {

    // put the image object into a variable
    // formData is incomaptible with IE9/8/7
    fileData = new FormData();
    fileData.append('file', this.files[0]); 

      var options = {  
           // XMLHttpRequest Level 2 - no cross-browser support
           data: fileData,   
           url: 'upload.php', // override standard url for this call only
           type: 'post'
      };

      // make an ajax call to post the image           
      $.ajax(options);

      // Alternatively use the jQuery Form plugin          
      // $('#registration').ajaxSubmit(options);


 });

Unfortunately the jQuery Form Plugin http://malsup.com/jquery/form/#file-upload submits the entire form, when I want the input file field to be submitted only.

Also, I'd rather avoid building multiple individual forms in my HTML markup, as I'd then have to process and submit multiple forms as well.

What am I missing here?

you are missing enctype='multipart/form-data' attribute in the form tag — coding_idiot
– coding_idiot, Commented Oct 2, 2013 at 21:40

Dnyaneshwar Supe · Accepted Answer · 2013-10-04 06:38:10Z

2

You can use "beforeSubmit" call back to modify the form-data being submitted. to achieve this we first delete the form data array elements which are not of file type, then we remove these elements from array by using "clean" prototype defined.

Function to submit file:

        $('#file').change(function () {
            $('#registration').ajaxSubmit({
                url:'upload.php',
                type: 'post',
                beforeSubmit: function (formData, $form, options) {
                    $.each(formData, function (i, obj) {
                        if (obj != null) {
                            if (obj.type != "file")
                                delete formData[i]; //delete the elements which are not required.
                        }
                    });
                    formData.clean(undefined);//remove deleted elements
                }
            });
        });

clean Prototype:

    Array.prototype.clean = function (deleteValue) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == deleteValue) {
                this.splice(i, 1);
                i--;
            }
        }
        return this;
    };

Hope this helps :)

edited Oct 4, 2013 at 6:38

answered Oct 2, 2013 at 18:07

Dnyaneshwar Supe

1413 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marc Owens Over a year ago

This works for me. Thanks a lot! Performance-wise, does it make sense to use $.each? Wouldn't we rather want to push the obj.type "file" into an array instead of deleting unwanted formData from the array? I am thinking of going mobile here.

Dnyaneshwar Supe Over a year ago

Yes, You can push obj type file if the objects are known, I wrote this as generic code where you don't know the number and name of objects in the form which is being submited. I used for loop because splice takes index as one parameter :)

user636328 · Accepted Answer · 2014-03-12 16:55:13Z

0

all you have to do is to set a hidden value of the form , trap the value in your server side and ONLY process the file upload works, ignore other form variables that passed to the server. that makes it easier. You can set the hidden value back once your file upload work was done ( to tell your server side this time it should process all the variables of the form ).

answered Mar 12, 2014 at 16:55

user636328

1

Collectives™ on Stack Overflow

submit input file only jQuery Form Plugin

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related