Ajax请求不会传递表单的文件

时间:2017-07-31 09:24:12

标签: javascript php jquery ajax

我遇到的问题是表格没有传递一个变量。

我的表:

Schema::create('projects', function(Blueprint $table)

    {
        $table->increments('id');
        $table->string('slug');
        $table->integer('order');
        $table->integer('public')->default(1);
        $table->string('pathheader')->default('/');
        $table->string('pathhome')->default('/');
        $table->timestamps();
    });

我有这个刀片,有一些表格(我会把这个代码放在ajax之后)

@extends('cms.public.layouts.default')
@section('content')
<div class="col-md-10">
    <h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">PROYECTOS</h3>
</div>

<div id="listall"> <!-- DIV TO LIST ALL THE PROJECTS START HERE -->
        <div class="col-md-2" style="padding:20px;">
          <button type="button" id="buttoncreate" class="btn btn-danger">Crear Proyecto</button>

        </div>
                      <table class="table">
                  <thead style="color:white">
                    <tr>
                      <th>Id</th>
                      <th>Slug</th>
                      <th>Order</th>
                      <th>Public</th>
                      <th>Fecha creación</th>
                      <th>Fecha ultima actualización</th>
                      <th><span class="glyphicon glyphicon-cog"></span></th>
                    </tr>
                  </thead>
                  <tbody style="color:white">
                  @foreach ($projects as $key => $project)
                    <tr>
                      <th>{{$project->id}}</th>
                      <td>{{$project->slug}}</td>
                      <td>{{$project->order}}</td>
                      <td>{{$project->public}}</td>
                      <td>{{ date('M j, Y', strtotime($project->created_at))}}</td>
                      <td>{{ date('M j, Y', strtotime($project->updated_at))}}</td>
                      <td><a href="{{ route('admin.projects.show', $project->id)}}" class="btn btn-info btn-sm">View</a> <a href="{{ route('admin.project.edit', $project->id)}}" class="btn btn-success btn-sm">Edit</a>
                  @endforeach
                    </tr>
                  </tbody>
                </table>
  <br><br>
</div>  <!-- DIV TO LIST ALL THE PROJECTS END HERE -->

<div id="form1" style="display:none;" class="col-md-8"> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 START HERE-->
    <div>
    <h3>Crear nuevo proyecto</h3>
    </div>
    <div id="formcreateproject">
        <form method="POST" action="{{ route('admin.projects.store') }}" enctype="multipart/form-data" id="myForm" name="myForm">
         <input type="hidden" name="_token" value="{{ Session::token() }}">

          <div class="form-group">
            <label name="title">Slug:</label>
            <input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm">
            <label name="order">Order:</label>
            <input type="number" id="order" name="order" class="form-control form-control-sm">
            <label name="public">Public:</label>
            <input type="number" id="public" name="public" class="form-control form-control-sm">
             <label name="body">Header</label>
            <input type="file" name="pathheader" id="pathheader"  class="form-control-file" aria-describedby="fileHelp"><br>
            <label name="body">Home</label>
            <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br>
            <input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md">
            <br><br><br>

          </div>
        </form>

      </div>
</div> <!-- DIV TO SHOW THE CREATE PROJECT FORM 1 END HERE-->

<div id="form2" style="display:none;" class="col-md-6">
<div class="col-md-">
    <h3>Crear nuevo proyecto</h3>
    </div>
      <form enctype="multipart/form-data">
          <div class="form-group">
            <label name="title">Slug:</label>
            <input type="text" id="slug" name="slug" placeholder="ejemplo-de-slug" class="form-control form-control-sm">
            <label name="order">Order:</label>
            <input type="number" id="order" name="order" class="form-control form-control-sm">
            <label name="public">Public:</label>
            <input type="number" id="public" name="public" class="form-control form-control-sm">
             <label name="body">Header</label>
            <input type="file" name="pathheader" id="pathheader"  class="form-control-file" aria-describedby="fileHelp"><br>
            <label name="body">Home</label>
            <input type="file" name="pathhome" id="pathhome" class="form-control-file" aria-describedby="fileHelp"><br>

            <input type="submit" value="Crear Proyecto" id="createprojectsubmit" class="btn btn-danger btn-md">
            <input type="hidden" name="_token" value="{{ Session::token() }}">
            <br><br><br>

          </div>
        </form>
</div>

</div>
@stop

这是ajax代码:

//Javascript view /projects/menu.blade.php
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$(document).ready(function(){
    $("#buttoncreate").click(function(){
        $("#listall").hide();
        $("#form1").fadeIn(1000);

    });

    $("#createprojectsubmit").click(function(){
        $("#myForm").submit();
    });

    $("#myForm").submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'/admin/projects/postUpload',
            type:'post',
            data:$('#myForm').serializeArray(),
            success: function(){
                $("#form1").fadeOut(1000);
                $("#form2").fadeIn(1000);
            }
        });
    });
});

当执行ajax时,我会检查表单数据并显示以下行:

_token:ymzuWLO6I0nl7z5CQEBNJ4Af51NfriftjP1swWmH
slug:Test3
order:1
public:1

它给我一个错误:

  

在null

上调用成员函数getRealPath()      

在FilesystemAdapter-&gt; putFileAs(&#39; Test3&#39;,null,&#39; header.png&#39;)

我也放了控制器代码:

public function storeProject(Request $request)
        {
        $project = new Project();
        $project->slug = $request->input("slug");
        $project->order = $request->input("order");
        $project->public = $request->input("public");
        $project->pathheader = $request->file('pathheader');
        $project->pathhome = $request->file('pathhome');
        \Storage::disk('public')->makeDirectory($project->slug);
        \Storage::disk('public')->putFileAs($project->slug,$project->pathheader,'header.png');
        \Storage::disk('public')->putFileAs($project->slug,$project->pathhome,'home.png');
        $project->save();
        }

问题在于$ project-&gt; pathhome和$ project-&gt; pathheader,它们是否为空,知道原因吗?

非常感谢,如果需要更多信息请问。

3 个答案:

答案 0 :(得分:1)

您可以尝试使用FormData()

$("#myForm").submit(function(e){
    e.preventDefault();
    var formData = new FormData($(this)[0]);
    $.ajax({
        url: '/admin/projects/postUpload',
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            $("#form1").fadeOut(1000);
            $("#form2").fadeIn(1000);
            //alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

以上是示例代码,但您可以使用它来修改它。

答案 1 :(得分:0)

要使用ajax发送文件,您需要在ajax请求中添加以下代码。

    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    url:'',

添加此代码后,您的代码就像。

$("#myForm").submit(function(e){
        e.preventDefault();
        $.ajax({
            url:'/admin/projects/postUpload',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type:'post',
            //data:$('#myForm').serializeArray(),
            success: function(){
                $("#form1").fadeOut(1000);
                $("#form2").fadeIn(1000);
            }
        });
    });

答案 2 :(得分:0)

在标题上添加meta以便验证csrf

<meta name="csrf-token" content="{{ csrf_token() }}" />