文件未在 cakephp 中使用 Ajax 上传

Posted 2023-02-24

【中文标题】文件未在 cakephp 中使用 Ajax 上传

【英文标题】：File not Uploading using Ajax in cakephp

【发布时间】：2015-09-02 05:06:10

【问题描述】：

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

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;
        

【参考方案1】：

使用这种 AJAX 表单提交方式，您将无法使用 ajax 上传文件。

如果您不喜欢使用像 dropzone.js 或 Jquery file upload 这样的第三方插件， 你可以使用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

【讨论】：

尝试了您建议的代码，但在控制器中打印时仍然没有文件数据。这是控制台中的 o/p。数组 ( [newcatname] => ASAS )

这对我来说很好，而且我上传文件没有任何问题。当您检查浏览器时。点击网络选项卡，然后提交表单，看看是否有任何错误。

我已经编辑了我的代码以删除一个额外的关闭“”。希望它应该可以正常工作。并确保将处理表单提交的函数的路由添加到您的 route.php

使用了相同的代码，但只得到 Array ( [newcatname] => awdawd )，文件仍然丢失.. 是否需要 setRequestHeader？

显示您正在使用的完整代码。 XMLHttpRequest 和控制器