Question

after pulling my hair out for two days trying to figure this issue out I finally decided to join this community as a last resort in search of some serious aid.

Basically I have a form that is supposed to send an email along side an attachment (like a resume / C.V) that a user as uploaded. I am using Jquery to validate on clientside and Ajax / Json to send the form to my PHP mailer file and get a response back etc without refreshing.

The email portion of everything works perfectly but somehow the attachment is not reaching me.
This is my Jquery code below, Im praying someone out there will know where this noob is messing up…

    $('#jobsubmit').click(function(e){

                e.preventDefault();  



                  var valid = '';
                  var required = 'is required';
                  var fileUpload = $('form#jobform #cv_upload').val().split('.').pop().toLowerCase();
                  var allow = new Array('jpg','wps','odf','txt','rtf','doc','docx','pdf');
                  var jobtitle = $('form#jobform #job_title').val();
                  var name = $('form#jobform #job_name').val();
                  var email = $('form#jobform #job_email').val();
                  var contactnumber = $('form#jobform #job_number').val();
                  var portfolio = $('form#jobform #job_portfolio').val();

                  var honeypot = $('form#jobform #honeypot').val();
                  var humancheck = $('form#jobform #humancheck').val();





                  if(name = '' || name.length <= 2) {
                      valid = '<p class= \"errortext_jobs\">Your name ' + required + '</p>';
                      }


                  if(jQuery.inArray(fileUpload, allow) == -1) {
                      valid += '<p class= \"errortext_jobs\">Please select a valid C.V file type to upload.</p>';

                      }


                  if(!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
                      valid += '<p class=\"errortext_jobs\">Your email ' + required + '</p>';
                  }

                  if(!contactnumber.match(/^([0-9]+)$/)) {
                      valid += '<p class=\"errortext_jobs\">Your number ' + required + '</p>';
                  }







                  if(honeypot != 'http://') {
                      valid += '<p class=\"errortext_jobs\">Spambots are not allowed</p>';

                  }

                      if(humancheck != '') {
                      valid += '<p class= \"errortext_jobs\">A Human user ' + required + '</p>';

                  }


                  if (valid != '') {
                        $('#job_response').removeClass()
                        .addClass('error')
                        .html('<p class= \"errortitle\"> Please correct the errors below </p>' + 
                        valid)
                       .fadeIn('fast');

                  }   else {
                        $('#job_response').removeClass()
                        .addClass('form_processing')
                        .html('<p class= \"processtitle\">Processing...</p>')
                        .fadeIn('fast'); 




                  var formData = $('form#jobform').serialize();
                  submitForm(formData);

                  }


                });

});


function submitForm(formData) {

$.ajax({

       type:'POST',
       url:'jobengine.php5',
       data: formData,
       dataType: 'json',

       timeout: 7000,
       success: function(data) {


                    $('#job_response').removeClass()
                        .addClass((data.error === true) ? 'error' : 'success')
                        .html(data.msg).fadeIn('fast');

if ($('#job_response').hasClass('success')) {

setTimeout("$('#job_response').fadeOut('slow')", 5000);                              
}

     },
        error: function(XMLHttpRequest, textStatus, errorThrown){

                $('#job_response')
                .removeClass().addClass('error')
                .html('<p class= \"errortext_jobs\">There was an ' + errorThrown + '</p>'
                      + '<p class= \"errortext_jobs\"> error due to an ' 
                      + textStatus +  '</p>'
                      + '<p class= \"errortext_jobs\"> condition. </p>').fadeIn('fast');



        },
        complete: function(XMLHttpRequest, status){
            $('form#jobform')[0].reset();

        }






});

And this is the HTML portion below:

  <form id="jobform" method="post" action="jobengine.php5" enctype="multipart/form-data">





    <p class="formtext_job" >Job Position:</p> 
    <input type="text"   name="job_title" id="job_title"/>



    <p class="formtext_job" >Your Name:<span class="red">*</span> </p>
    <input type="text"   name="job_name" id="job_name"/>



    <p class="formtext_job" >Your Email:<span class="red">*</span></p>
    <input type="text"   name="job_email" id="job_email"/>



    <p class="formtext_job" >Your Contact Number:<span class="red">*</span></p>
    <input type="text"   name="job_number" id="job_number"/>


    <p class="formtext_job" >Your Website:</p><span class="italicgrey">(If applicable) </span>
    <input type="text"   name="job_portfolio" id="job_portfolio"/>





<div class="input_pos"> 
<p class="formtext_job2" >Attach your C.V :</p>

    <div class="uploadimg">
    <input type="file" id="cv_upload" name="cv_upload"  />
    </div>
    <div id="upload_list"></div>
 </div>  







 <input type="image" name="jobsubmit" value="submit" 
 src= "../images/buttons/form_buttons/apply_button.jpg" id="jobsubmit" />




<input type="hidden" name="honeypot" id="honeypot" value="http://" />

<input type="hidden" name="humancheck" id="humancheck" class="clear" value="" />

</form> 

If more info is required please let me know as I have be fighting this thing for so long…

Thanks in advance.

Answer 1

$.ajax doesn’t support file uploads, plain and simple.

This is because you can’t do file uploads with XHR, because JavaScript can’t read the file data.

You need to submit the form to a hidden iframe or make use of Flash/Java/etc for file uploads.