如何通過AJAXjquery輸入檔案影像？

所以我想通過 AJAX 從 html 提交或上傳檔案并將其發送到我的 Laravel cotnroller。當我提交給控制器并執行時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');
                    }
                });
            }
        })
    }

uj5u.com熱心網友回復：

您沒有在 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');
    }
});

標籤：jQuery 阿贾克斯 上传文件

上一篇：如何將地址放在一起以用于移動視圖-col-xs-12col-sm-12

下一篇：在Yii2中移動Bootstrap3模態