Javascript 在从客户端jQueryLaravel上传之前，预先调整多个图像的大小

代码正在部分工作，它收集图像并在循环中将其调整为base64大小，但当我将其附加到表单中时，我无法获得要发送的图像。。。 但当我通过删除调整大小功能发布简单图片时，它会发送每张图片。。。 我不明白是什么问题

以下是html：

Upload Pictures <input type="file" name="file[]" id="file" multiple/>

上传图片

我在这里收集照片：

<script>
        $(document).on('change','#file',function(){
            files = this.files;
            ajax_file_upload(files);
        });
</script>

$（document）.on（'change'，'#file'，function（）{
files=this.files；
ajax文件上传（文件）；
});

下面是我在循环中调整它们大小并通过ajax发送它们的代码： 注意：在resize功能中，我在控制台中获得了调整大小的图片。。。 我会附上一张照片的控制台以及

函数ajax\u文件上传（文件obj）{
if（file_obj！=未定义）{
var status='true'；
var image=new FormData（）；
var match=['image/jpeg'，'image/png'，'image/jpg']；
对于（i=0；i所以，我没有任何帮助，但我通过使用tweeks解决了这个问题。。。。
我正在发布它们，这样可以帮助某人…谢谢

在这里，我拾取图片并将其传递以调整大小，并将其按入数组：

 $(document).on('change','#selectfile',function(){
            file_obj = this.files;
            pictures_array(file_obj);
    });

这里是用于调整大小并将其存储在数组中的函数，我在这里限制ajax函数在数组中计数不等于文件长度之前运行，并进行了一些验证..：

function pictures_array(file_obj){
            var image_count = $('.sequence').length-1;
            count = file_obj.length;
            var new_count = image_count+count;
            
            console.log(image_count,new_count,count);
            if(new_count<=15){
            $('.ajax-loader').css("visibility", "visible");
            
            pictures = [];


            for(i=0; i<file_obj.length; i++) {
                var fileType = file_obj[i].type;
                var match = ['image/jpeg', 'image/png', 'image/jpg'];
                if(!((fileType == match[0]) || (fileType == match[1]) || (fileType == match[2]) || (fileType == match[3]) || (fileType == match[4]) || (fileType == match[5]))){
                    var status='false';
                }
                resizeImages(file_obj[i],function(dataUrl){
                    var data = dataUrl;
                    pictures.push(data);
                    if(!--count) {
                        ajax(pictures);
                    }

                });

            }
            
            }else{
                $('#max_limit').html(15);
                $('#limit').show();
                $('html, body').animate({
                        scrollTop: $(".main-image").offset().top
                    }, 2000);
                $('#selectfile').val('');
                $('#selectfile1').val('');    
            }
}

因此，最终4.8MB的图片现在重达316KB，这是一个成功

我之所以发布这篇文章，是因为我没有发现任何类似的东西，而且我花了很多时间来做这件事，，，可能是我没有进行适当的研究，但这就是我如何在没有任何触发按钮的情况下在客户端上传多个预调整大小的图像的方法。。。
将上载时间缩短到90%

希望能帮助别人谢谢
问候

 $(document).on('change','#selectfile',function(){
            file_obj = this.files;
            pictures_array(file_obj);
    });

function pictures_array(file_obj){
            var image_count = $('.sequence').length-1;
            count = file_obj.length;
            var new_count = image_count+count;
            
            console.log(image_count,new_count,count);
            if(new_count<=15){
            $('.ajax-loader').css("visibility", "visible");
            
            pictures = [];


            for(i=0; i<file_obj.length; i++) {
                var fileType = file_obj[i].type;
                var match = ['image/jpeg', 'image/png', 'image/jpg'];
                if(!((fileType == match[0]) || (fileType == match[1]) || (fileType == match[2]) || (fileType == match[3]) || (fileType == match[4]) || (fileType == match[5]))){
                    var status='false';
                }
                resizeImages(file_obj[i],function(dataUrl){
                    var data = dataUrl;
                    pictures.push(data);
                    if(!--count) {
                        ajax(pictures);
                    }

                });

            }
            
            }else{
                $('#max_limit').html(15);
                $('#limit').show();
                $('html, body').animate({
                        scrollTop: $(".main-image").offset().top
                    }, 2000);
                $('#selectfile').val('');
                $('#selectfile1').val('');    
            }
}

function ajax(pictures) {
    // console.log(pictures);
    
    var image = new FormData();
    var pictures = pictures;
    for (var i = 0; i < pictures.length; i++) {
        image.append('file[]',pictures[i]);
    }


    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            // 'Content-Type': 'multipart/form-data',
        },
        url: "{{ route('images_private.store',$row->id) }}",
        type: "POST",
        data: image,
        cache: false,
        processData: false,
        contentType: false,
        datatype: 'html',
        beforeSend: function(){
                    $('.ajax-loader').css("visibility", "visible");
                },
                success:function(response) {
                    $('#selectfile').val('');
                    $('#selectfile1').val('');
                    $('#appendhtml').html(response);
                    // $('#appendhtml').load('#appendhtml');
                    setTimeout(function() {
                        toastr.options = {
                            closeButton: true,
                            progressBar: true,
                            showMethod: 'slideDown',
                            timeOut: 4000
                        };
                        toastr.success('Images uploaded successfully');
                    }, 1300);
                    $("#other-image-main").sortable({
                        cursor: 'move',
                        opacity: 0.6,
                        update: function() {
                            sendOrderToServer();
                        }
                    });

                },
                complete: function(){
                    $('.ajax-loader').css("visibility", "hidden");
                    $('#valid_image_type').hide();

                },
    });
}

if(!File::isDirectory($path)){

        File::makeDirectory($path, 0777, true, true);

    }
        if($request->has('file')){
        foreach ($request->file as $image){
            $position++;
            list($type, $image) = explode(';', $image);
            list(, $image)      = explode(',', $image);

            $image = base64_decode($image);

            $source_img = imagecreatefromstring($image);
            $filename= uniqid() . '.jpg';
            $filepath = $path.$filename ;
            $imageSave = imagejpeg($source_img, $filepath);
            
            ImagesPrivate::create([
                'user_id'=>$id,
                'owner_id'=>$auth,
                'name'=>$filename,
                'position'=>$position,
                'position_change'=>$position,
                'delete' => 'pending',
                ]);
            
        }
        }