Question

尝试使用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;
        }

Answer 1

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

如果您不喜欢使用var windowSize = function () { if ( $(window).width() > 2000 ) { alert('yes') } else { alert('no') } } $(document).ready(windowSize); $(window).resize(windowSize);或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

                     }
                   }
             });

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

1 个答案: