使用 ajax 选择后立即上传图像，不使用 onclick 事件

Question

我正在尝试使用 ajax 在 laravel 中上传图片，如下所示

    $(document).ready(function () {
        bsCustomFileInput.init();
        $('#exampleInputFile').on('change', function(){
            var file = this.files[0];
            var fileType = file["type"];
            var validImageTypes = ["image/gif", "image/jpeg", "image/png"];
            if ($.inArray(fileType, validImageTypes) < 0) {
                // invalid file type code goes here.
                alert('Please select a valid image in the following formats .gif, .jpeg, .png');
            }else{
                //get the image and place it in a variable
                $.ajaxSetup({
                    headers: {
                        '_token' : $('input[name=_token]').val()
                    }
                });
                var formData = new FormData(document.getElementById("#upload-image-form"));
                alert("Created FormData, " + [...formData.keys()].length + " keys in data");
                $('#image-input-error').text('');
                $.ajax({
                    type:'POST',
                    url: `/property/images/add`,
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response) {
                        $('#exampleInputFile').reset();
                        $('#images').append("<img class='img-responsive' src='uploads/property/small/"+
                        response.path +"'/>");
                        alert('Image has been uploaded successfully');
                        }
                    },
                    error: function(response){
                        console.log(response);
                            $('#image-input-error').text(response.responseJSON.errors);
                    }
                });
            }
        });
    });

我的问题是选择后出现以下错误

    Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.
at HTMLInputElement.<anonymous> (add:234)
at HTMLInputElement.dispatch (jquery.min.js:2)
at HTMLInputElement.v.handle (jquery.min.js:2)

抛出错误的那一行是实例化FormData的那一行。我可能做错了什么，或者更确切地说，我怎样才能在没有点击事件的情况下上传图片？

Answer 1

经过多次尝试和阅读，我最终得到了这段代码

    <script type="text/javascript">
    $(document).ready(function () {
        bsCustomFileInput.init();
        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('input[name=_token]').val()}
        });

        $('#images').change(function () {
            event.preventDefault();
            let image_upload = new FormData();
            let TotalImages = $('#images')[0].files.length;  //Total Images
            let images = $('#images')[0];  
            let p_id = $('input[name=p_id]').val();

            for (let i = 0; i < TotalImages; i++) {
                image_upload.append('images[]', images.files[i]);
            }
            image_upload.append('TotalImages', TotalImages);
            image_upload.append('p_id', p_id);

            $.ajax({
                method: 'POST',
                url: '{{ route('image.add') }}',
                data: image_upload,
                contentType: false,
                processData: false,
                success: function (images) {
                    Swal.fire(
                    'Success!',
                    'Images uploaded successfully',
                    'success'
                    );
                    $('#images').reset();

                },
                error: function () {
                    Swal.fire(
                    'Failed!',
                    'An error occured please try again',
                    'error'
                    );
                    $('#images').reset();
                }
            });

        });
    });
</script>

它确实有效并消除了故障点并且还更新了之前使用的那个

使用 ajax 选择后立即上传图像，不使用 onclick 事件

uploading an image immediately after selection using ajax without onclick event

ajax

form-data