文件没有在cakephp中使用Ajax上传

我试图使用Ajax将图像上传到服务器.我知道使用CakePHP上传文件的代码,但首先我只想确保通过打印formdata将数据/文件上传到服务器.但似乎只发布了我在文本框中键入的数据,而不是我选择的文件.任何帮助,将不胜感激.链接下面的代码

HTML

<form id="newcatform" method="post" action="<?PHP echo($this->Html->url(array('controller'=>'ajaxadmin','action'=>'newcategory'))); ?>" enctype="multipart/form-data">
            <div class="row" style="margin-top:20px;">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5>Create Category</h5>
                        </div>
                        <div class="panel-body">
                                <div class="form-group" style="padding:15px 0px;">
                                    <label class="col-lg-3 control-label">Category Name</label>
                                    <div class="col-lg-9">
                                        <input type="text" name="newcatname" id="newcatname" class="form-control input-sm valid">
                                    </div>
                                </div>
                                <div class="form-group" style="padding:15px 0px;">
                                    <label class="col-lg-3 control-label">Category Image</label>
                                    <div class="col-lg-9">
                                        <input type="file" name="newcatimage" id="newcatimage">
                                    </div>
                                </div>
                                <div class="form-group" style="padding:15px 0px;">
                                    <label class="col-lg-3 control-label">&nbsp;</label>
                                    <div class="col-lg-9">
                                        <button type="submit" class="btn btn-primary btn-sm">Create</button>
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

JS

$('#newcatform').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData($('#newcatform')[0]);
        //formData.append("type", $("#newcatname").val());
        //formData.append("content", $("#newcatimage").prop('files')[0]);
        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            cache:false,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

在行动控制器中

if($this->request->is('post')){
            $this->Layout=null;
            $this->autoRender=false;
            $formdata=$this->request->data;
            print_r($formdata);
            exit;
        }

解决方法:

使用这种AJAX表单提交方法,您将无法使用ajax上传文件.

如果您不喜欢使用dropzone.js或Jquery文件上传等第三方插件,
你可以使用XMLHttpRequest.以下示例：

$('#newcatform').on('submit', function(ev){
    ev.preventDefault();

   var forms = document.querySelector('form#newcatform');

   var request = new XMLHttpRequest();

   var formDatas = new FormData(forms);
   request.open('post','yourControllerFunction');
   request.send(formDatas);

   request.onreadystatechange = function() {
    if (request.readyState === 4) {
      if (request.status === 200) {

       //Request was OK show success message

     } else {
                       // Request not OK, show error message

                     }
                   }
             });

在控制器中,使用：

if($this->request->is('post')){
   $data = $this->request->data;
   echo "<pre>",print_r($data),"</pre>";
   //You should be able to see file data in this array
}