文件没有上传到服务器上使用Ajax [英] file not uploaded to the server with ajax

问题描述

这是我的表格来源：

<form id="createProject" name="createProject" class="form-light" method="post" enctype="multipart/form-data" target="upload_target">
    <div  class="col-md-10" id="sandbox-container1">
    <label>Project duration</label>
    <div class="input-daterange input-group" id="datepicker">
    <input type="text" required class="input-md form-control" id="start" name="start" />
    <span class="input-group-addon">to</span>
    <input type="text" required class="input-md form-control" id="end" name="end" />
    </div>
    </div>
    <div class="col-md-10">
    <div class="form-group">
    <label>Project attachment's</label>
    <input type="file" class="form-control" id="projectFile" name="projectFile" placeholder="Select project  attachment's">
    </div>
    </div>
    <input type="hidden" id="ownerid" name="ownerid" value="<?php echo $userid; ?>">
    <div class="col-md-10">
    <div class="form-group">
    <button class="btn btn-two pull-right btn-lg" form="createProject" type="submit">Submit</button>
    </div>
    </div>
</form>

文件不上传到服务器。
我用ajax函数来递交。

File is not uploading to the server.
I use ajax function to submit.

$.ajax({
    url:'ajaxcalls/createprojectfunction.php',
    data:$(this).serialize(),
    type:'POST',
    beforeSubmit:  function()
    {
        /* Before submit */
        for ( instance in CKEDITOR.instances )
        {
            CKEDITOR.instances[instance].updateElement();
        }
    },
    success:function(data){
        console.log(data);
    },
        error:function(data){
    }
});

Firebug的控制台发生此错误。
注意：未定义指数：projectFile
但所有其他的输入元素都accessable在阿贾克斯URL php文件。

Firebug console this error occur.
Notice: Undefined index: projectFile.
but all other input element are accessable in ajax URL php file.

推荐答案

您将不得不使用的 FORMDATA 对象通过AJAX上传文件，

You'll have to use a FormData object to upload a file via ajax,

$.ajax({
  url:'ajaxcalls/createprojectfunction.php',
  data: new FormData(this),
  type:'POST',
  processData: false,
  contentType: false,
  beforeSubmit:  function()
  {
        /* Before submit */
    for ( instance in CKEDITOR.instances )
    {
        CKEDITOR.instances[instance].updateElement();
    }
    },
  success:function(data){
  console.log(data);
  },
  error:function(data){
  }
});

这篇关于文件没有上传到服务器上使用Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！