在从客户端上传之前预先调整多张图片的大小 Jquery Laravel

Question

代码部分工作，它收集图像并在一个循环中将它们调整为 base64，但是当我将它附加到表单中时我没有得到要发送的图像... 但是当我通过删除调整大小功能 post 简单图片时，它会发送每张图片... 我不明白这是什么问题..

这里是 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>

这是我在循环中调整它们的大小并通过 ajax 发送它们的代码：注意：在调整大小功能中，我在控制台中获取调整大小的图片... 我也会附上控制台的图片...

<script>
        function ajax_file_upload(file_obj) {

            if(file_obj != undefined) {
               var status='true';
                var image = new FormData();
                var match = ['image/jpeg', 'image/png', 'image/jpg'];
                for(i=0; i<file_obj.length; i++) {
                    var fileType = file_obj[i].type;
                    // alert(fileType)
                    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){
                        image.append('file[]',dataUrl);
                    });
                }
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: "{{ route('resize') }}",
                    type: "POST",
                    // data: {pictures:pictures},
                    data:image,
                    cache:false,
                    processData: false,
                    contentType: false,
                    datatype:'html',
                    success: function (response) {
                        return true;
                            }
                        });
                }
        }
    </script>

这里是我用来调整图像大小和获取数据 url 的调整大小函数：

<script>
        function resizeImages(file,complete) {
            // read file as dataUrl
            ////////  2. Read the file as a data Url
            var reader = new FileReader();
            // file read
            reader.onload = function(e) {
                // create img to store data url
                ////// 3 - 1 Create image object for canvas to use
                var img = new Image();
                img.onload = function() {
                    /////////// 3-2 send image object to function for manipulation
                    complete(resizeInCanvas(img));
                };
                img.src = e.target.result;
            }
            // read file
            reader.readAsDataURL(file);

        }



        function resizeInCanvas(img){
            /////////  3-3 manipulate image
            var perferedWidth = 1200;
            var ratio = perferedWidth / img.width;
            var canvas = $("<canvas>")[0];
            canvas.width = img.width * ratio;
            canvas.height = img.height * ratio;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0,0,canvas.width, canvas.height);
            //////////4. export as dataUrl
            return canvas.toDataURL('image/jpeg', 0.6);
        }
    </script>

此功能运行良好... 现在，当我将它发送到服务器时，它 post 什么都没有.. 尝试了很多研究方法但没有得到任何东西.. 请指导我谢谢

Answer 1

所以，我没有任何帮助，但我设法通过使用 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('');    
            }
}

这是 ajax 调用：我正在文件中使用 for 循环追加 base64 版本的图片 []:

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();

                },
    });
}

然后是控制器的最后一步：在这里，我将 base64 解码为 jpeg 文件并将其存储到服务器中：

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',
                ]);
            
        }
        }

所以，最后4.8MB的图片现在重316KB就成功了,

我发布这个是因为我没有找到类似的东西，我花了一些时间来做这个，，，可能是我没有正确研究，但这就是我上传多张预先调整大小的图像的方式在客户端没有任何触发按钮... 将上传时间缩短至 90%...

希望对某人有所帮助谢谢此致

在从客户端上传之前预先调整多张图片的大小 Jquery Laravel

Pre- resize multiple images before uploading from client side Jquery Laravel

javascript

jquery

filereader

html5-canvas