Jquery Ajax Json к PHP Форма Приложение не проходит?

Question

после того, как я два дня пытался разобраться с этой проблемой, я наконец решил присоединиться к этому сообществу в качестве крайней меры в поисках серьезной помощи.

По сути, у меня есть форма, которая должна отправлять электронную почту вместе с вложением (например, резюме / C.V), которое пользователь загрузил. Я использую Jquery для проверки на стороне клиента и Ajax / Json для отправки формы в мой почтовый файл PHP и получения ответа и т. Д. Без обновления.

Электронная часть всего работает отлично, но вложение почему-то не доходит до меня.
Это мой код Jquery ниже, я молюсь, чтобы кто-нибудь там знал, где этот нуб портит ...

    $('#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();

        }






});

И это часть HTML ниже:

  <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> 

Если потребуется дополнительная информация, пожалуйста, дайте мне знать, так как я так долго борюсь с этим ...

Заранее спасибо.

Answer 1

$.ajax не поддерживает загрузку файлов, просто и понятно.

Это потому, что вы не можете загружать файлы с помощью XHR, поскольку JavaScript не может прочитать данные файла.1005 * Вам необходимо отправить форму в скрытый iframe или использовать Flash / Java / etc для загрузки файлов.

Answer 2

Не используйте щелчок, используйте отправить.

jQuery("#Form").submit(function() {

    var url = "application.php"; 
    jQuery.ajax({
            type: "POST",
            url: url,
            data:  new FormData(this),
            cache: false,
            contentType: false,
            processData: false,             
            success: function(data){
                alert(data); 
            }
    });

    event.preventDefault();
});

Answer 3

Хорошо для одного использования $('form#jobform').submit(function(e) { не click()

Смотрите здесь: http://jsfiddle.net/maniator/3K82k