AJAXを使用してサーバーにファイルをアップロード

Question

hereからのアプローチを使用してAJAXファイルのアップロードを実行しようとしていますが、それを達成する運がありません。私は、デバッグにアラートのカップルを追加し、次のコードの上に第二のブレークポイントに到達できませんでした：

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

単に形式がファイルを持っていません..しかし、ファイルの入力は..あなたが$('#frmSlide').prop

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