Question

我正在尝试使用ajax在我的控制器中发送文件数据，但它不起作用。以下是代码结构;

表格

    <form id="contact_img" enctype="multipart/form-data">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
      <input id="contact_image" name="contact_image" type="file" class="file">
      <input type="text" class="form-control" name="testtest" id="testtest" required>
      <button type="submit" class="btn-default">Save</button>
    </form>

AJAX

    $.ajax({
        url: "{{ url('/') }}/admin/upload_contact_img",
        data: $("#contact_img").serialize(),
        success: function (data) {
          alert(data);
          location.reload();
        },
    });

我的网络路线

路由:: get（＆＃39; admin / upload_contact_img＆＃39;，＆＃39; admin_controller @ contact_img_upload＆＃39;）;

控制器

public function contact_img_upload(Request $form){
    if ($form->hasFile('contact_image')){
        echo $form->file('contact_image');

    }else{
        echo "empty";
    }
    echo $form->testtest;
}

只有输入testtest才会显示该值。

Answer 1

尝试使用formData（）代替序列化表单。

 $("#contact_img").on('submit', function(e){
       e.preventDefault(); 
       var form = new FormData(e.target)          
      $.ajax({
        url: "{{ url('/') }}/admin/upload_contact_img",
       data : form,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
        success: function (data) {
          alert(data);
        },
        type:'POST'
    });
    });

参见示例https://jsfiddle.net/cihkem/hk7u9kLf/

Answer 2

问题是Ajax文件上传不那么容易。您需要实现FileReader。

请参阅此答案：Uploading files in HTML5 with Ajax

Answer 3

1）在表单提交按钮

中添加id

<form id="contact_img" enctype="multipart/form-data">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input id="contact_image" name="contact_image" type="file" class="file">
    <input type="text" class="form-control" name="testtest" id="testtest" required>
    <button type="submit" id="submitBtn" class="btn-default">Save</button>
</form>

2）Ajax

jQuery(document).ready(function($){

    $("#submitBtn").click(function(e) {

        e.preventDefault();
        var contact_image = $("#contact_image").prop("files")[0];
        var testtest = $("#testtest").val();
        var form_data = new FormData();
        form_data.append("contact_image", contact_image);
        form_data.append("testtest", testtest);

        $.ajax({
            url: './admin/upload_contact_img',
            type: "POST",
            data: form_data,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
                console.log(data.contact_image);
                console.log(data.testtest);
            },
            error:function(error){
                console.log('Something went wrong');
            }
        });
    });

});

3）在controller

内

public function contact_img_upload(Request $form){
{
    if( $form->hasFile('image')) {
        $image = $form->file('image');

        //Image handling code //
    }

    $testtest = $form->testtest;
    return response()->json(['contact_image' => $image, 'testtest' => $testtest]);   
}

如果您需要演示项目，只需克隆此项目 Laravel-BoilerPlate-Template

Answer 4

只需将其放在控制器文件的顶部

use Illuminate\Http\UploadedFile;

因为Request的文件方法返回Illuminate \ Http \ UploadedFile类的实例，并且要对其进行操作，其名称空间必须在范围内

Answer 5

使用jQuery.form.js通过AJAX提交表单。你也可以上传进度。访问以下链接。

http://malsup.com/jquery/form/

上传文件为空Laravel 5.4

5 个答案: