Click here to Skip to main content
14,870,596 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,
I am building a website, that has a career page with Input File HTML Control for Resume uploading.
While using JQuery to POST the form values to an ASPX Page, Everything works fine except File uploading.
How can I Use JQuery to Post every fields (including files) in one AJAX request ?
The example I see in Google are handling only the file uploading, not other fields with it.
This is my JQuery, ASPX for file upload not made.

C#
<script type="text/javascript">

       $(document).ready(function(e) {
 
           // File variable
           var files;

           // Add events
           $('#resume').on('change', prepareUpload);

           // Grab the files and set them to our variable
           function prepareUpload(event)
           {
             files = event.target.files;
           }



       $( "#submit_btn" ).click(function( ) {
         
           var fileData = new FormData();
           $.each(files, function(key, value)
           {
               fileData.append(key, value);
           });



           var formMessage = tinyMCE.get('message').getContent();
           var formName = $('.contact-container #name').val();
           var formPhone = $('.contact-container #phone').val();
           var formEmail = $('.contact-container #email').val();
           var formApplyFor = $('.contact-container #applyfor').val();

        // Get some values from elements on the page:
       var a=  $.ajax({
               method: "POST",
               url: "mail/test.aspx",
               processData: false,
               contentType: false,
               data: {
                       form: 'career',
                       name: formName ,
                       phone: formPhone,
                       email: formEmail,
                       applyfor: formApplyFor,
                       resume: fileData,
                       coverletter: window.btoa(unescape(encodeURIComponent( formMessage)))
                       },

                       success: function (data) {
                       alert('success');

                   },
                   error: function (data) {
                       alert('err');

                   }
           })
           .done(function( msg ) {
               alert('done');
           }); //ajax end
       alert(a);

       }); //submit button end

       }); //document ready end
</script>
Posted

1 solution

Rather that create an object for the "data" property that contains FormData as a property itself, you create a single FormData that contains all your fields, including the files, and pass that single FormData to the "data" property

https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects[^]
   
Comments
Yesudass Moses 17-Mar-15 8:14am
   
Thanks so much :) It works

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900