Загрузить файл на сервер с помощью AJAX

Question

Я пытаюсь использовать подход от here для выполнения загрузки файла AJAX, но не повезло сделать это. Я добавил пару предупреждений для отладки и не может достичь 2-й точки останова на следующий код:

$.validate({ 
 
    form: '#frmSlide', 
 
    modules: 'file, html5', 
 
    validateOnBlur: false, 
 
    errorMessagePosition: 'top', // Instead of 'element' which is default 
 
    scrollToTopOnError: false, // Set this property to true if you have a long form 
 
    onSuccess: function($form) { 
 
     alert('1'); 
 
     var file_data = $('#frmSlide').prop('files')[0]; 
 
     alert('2'); 
 
     var form_data = new FormData(); 
 
     alert('3'); 
 
     form_data.append('file', file_data); 
 
     $.ajax({ 
 
     url: 'upload.php', // point to server-side PHP script 
 
     dataType: 'text', // what to expect back from the PHP script, if anything 
 
     cache: false, 
 
     contentType: false, 
 
     processData: false, 
 
     data: form_data, 
 
     type: 'post', 
 
     success: function(php_script_response) { 
 
      alert(php_script_response); // display response from the PHP script, if any 
 
     } 
 
     }); 
 
    } 
 
    });

<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide"> 
 

 
    <div class="form-group"> 
 
    <label class="col-sm-4 control-label" for="imgfile">Image file</label> 
 
    <div class="col-sm-8"> 
 
     <input type="file" id="imgfile" data-validation="required ratio mime size" data-validation-allowing="jpg, png, gif" /> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-sm-8 col-md-offset-4" id="image-holder"> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <label class="col-sm-4 control-label" for="seq">Sequence</label> 
 
    <div class="col-sm-8"> 
 
     <input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" /> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"> 
 
    <div class="col-sm-offset-4 col-sm-8"> 
 
     <button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i>&nbsp;Update</button> 
 
    </div> 
 
    </div> 
 

 
</form>

Может кто-нибудь указать мне, что я сделал не так? Благодарю.

Answer 1

просто форма не имеет файлы .. но входной файл есть .. так что вы можете использовать$('#imgfile').prop вместо $('#frmSlide').prop

var file_data = $('#imgfile').prop('files')[0];