如何通过AJAXjquery输入文件图片？

Question

所以我想从 html 到 AJAX 提交或上传文件并将其发送到我的 Laravel 控制器。当我提交给控制器并执行 dd($request) 时，它显示了除文件请求之外的所有输入请求。

这是我的代码

  <form method="post"  enctype="multipart/form-data" id="form-tambah-edit" name="form-tambah-edit" class="form-horizontal">
                            @csrf
                                <input type="hidden" name="id" id="id">
                                {{-- <input type="hidden" name="post_banner" id="post_banner"> --}}

                                <div class="form-group">
                                    <label for="name" class="col-sm-12 control-label">Banner Kegiatan</label>
                                    <div class="col-sm-12">
                                        <input type="file" class="form-control" id="banner" name="banner">
                                    </div>
                                </div>
</form>

这是我的 jquery AJAX 代码。

 if ($("#form-tambah-edit").length > 0) {
        var fileUpload = $("#banner").get(0);
        var files = fileUpload.files;
        var data = new FormData();

        for (var i = 0; i < files.length; i++) {
            data.append("File", files[i]);
        }

        $("#form-tambah-edit").validate({
            submitHandler: function (form) {
                var actionType = $('#tombol-simpan').val();
                $('#tombol-simpan').html('Sending..');

                $.ajax({
                    data: $('#form-tambah-edit')
                        .serialize(),
                    url: "{{ route('kegiatan.store') }}", 
                    type: "POST", 
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (data) {  
                        $('#form-tambah-edit').trigger("reset"); 
                        $('#tambah-edit-modal').modal('hide'); 
                        $('#tombol-simpan').html('Simpan');
                        var oTable = $('#kegiatan').dataTable();
                        oTable.fnDraw(false);
                        iziToast.success({ 
                            title: 'Data Berhasil Disimpan',
                            message: '{{ Session('
                            success ')}}',
                            position: 'bottomRight'
                        });
                    },
                    error: function (data) { 
                        console.log('Error:', data);
                        $('#tombol-simpan').html('Simpan');
                    }
                });
            }
        })
    }

Answer 1

您没有在 ajax 代码中设置请求方法，因此它将默认为 GET 请求，这是错误的，因此您必须明确地将其设置为 POST

您不能使用 .serialize() 进行文件上传，您必须使用 FormData 对象。

$.ajax({
    type: 'POST',
    data: new FormData($('#form-tambah-edit')[0]),
    url: "{{ route('kegiatan.store') }}", 
    type: "POST", 
    dataType: 'json',
    contentType: false,
    processData: false,
    success: function (data) {  
        $('#form-tambah-edit').trigger("reset"); 
        $('#tambah-edit-modal').modal('hide'); 
        $('#tombol-simpan').html('Simpan');
        var oTable = $('#kegiatan').dataTable();
        oTable.fnDraw(false);
        iziToast.success({ 
            title: 'Data Berhasil Disimpan',
            message: '{{ Session('
            success ')}}',
            position: 'bottomRight'
        });
    },
    error: function (data) { 
        console.log('Error:', data);
        $('#tombol-simpan').html('Simpan');
    }
});

如何通过AJAXjquery输入文件图片？

How to input file image through AJAX jquery?

ajax

jquery

file-upload