Question

我想使用带有多个输入的PHP上传多个文件，我也使用了Javascript维度验证。问题是PHP只接收一个文件。我希望所有接受Javascript代码的文件都应该发送。

这是我的html和Javascript代码：

HTML：

<input name="gig-images[]" accept="image/*" type="file" multiple id="fileee">

使用Javascript：

document.querySelector('#fileee').addEventListener('change', function () {
    var files = this.files;

    var imageBox = document.querySelector('.gig-images-box .box-body');
    var imageBoxFooter = $('.gig-images-box .box-footer');

    //  $('.gig-images-box .box-body').find('img.new_up').remove();


    if (files.length > 0) {
        var img_valid_arr = [];
        imageBoxFooter.html('');
        for (var i = 0; i < files.length; i++) {
            var load_img = new Image();
            load_img.onload = function () {
                var height = this.height;
                var width = this.width;
                if (width == 750 && height == 350) {
                    var imgElement = document.createElement('img');
                    imgElement.className = 'meriimage new_up';
                    imgElement.height = 60;
                    imgElement.src = this.src;
                    imgElement.onload = function () {
                        window.URL.revokeObjectURL(imgElement.src);
                    };
                    imageBox.appendChild(imgElement);
                } else {
                    img_valid_arr.push('not valid');
                }

                var sub = files.length - img_valid_arr.length;

                console.log(sub);

                var selc_cont = (sub == 0) ? '<p>No image selected.</p>' : '<p>' + sub + ' image selected.</p>';

                if (img_valid_arr.length > 0) {
                    imageBoxFooter.append(selc_cont);
                    $('.image-title').append('<span class="help-block" style="color:#ff0000; font-size:12px; display:inline-block">The image dimensions should be: 750 width and 350 height</span>');
                    setTimeout(function () {
                        $('.help-block').fadeOut();
                    }, 3000);
                } else {
                    imageBoxFooter.html(selc_cont);
                }
            };
            load_img.src = window.URL.createObjectURL(files[i]);
        }
    } else {
        imageBoxFooter.html('');
        imageBoxFooter.html('<p>No image selected.</p>');
    }
});

PHP代码：

//by using Laravel framework    

$images = $request->file('gig-images');

echo count($images); 
//it returns only 1 file while I upload multiple files

exit;

Answer 1

问题在于声明数组var img_valid_arr = [];在onchange函数之外。

        var img_valid_arr = [];
        document.querySelector('#fileee').addEventListener('change', function (){
        var files = this.files;
        var imageBox = document.querySelector('.gig-images-box .box-body');
        var imageBoxFooter = $('.gig-images-box .box-footer');
        //  $('.gig-images-box .box-body').find('img.new_up').remove();


        if (files.length > 0) {

            imageBoxFooter.html('');
            for (var i = 0; i < files.length; i++) {
                var load_img = new Image();
                load_img.onload = function () {
                    var height = this.height;
                    var width = this.width;
                    if (width == 750 && height == 350) {
                        var imgElement = document.createElement('img');
                        imgElement.className = 'meriimage new_up';
                        imgElement.height = 60;
                        imgElement.src = this.src;
                        imgElement.onload = function () {
                            window.URL.revokeObjectURL(imgElement.src);
                        };
                        imageBox.appendChild(imgElement);
                    } else {
                        img_valid_arr.push('not valid');
                    }

                    var sub = files.length - img_valid_arr.length;

                    console.log(sub);

                    var selc_cont = (sub == 0) ? '<p>No image selected.</p>' : '<p>' + sub + ' image selected.</p>';

                    if (img_valid_arr.length > 0) {
                        imageBoxFooter.append(selc_cont);
                        $('.image-title').append('<span class="help-block" style="color:#ff0000; font-size:12px; display:inline-block">The image dimensions should be: 750 width and 350 height</span>');
                        setTimeout(function () {
                            $('.help-block').fadeOut();
                        }, 3000);
                    } else {
                        imageBoxFooter.html(selc_cont);
                    }
                };
                load_img.src = window.URL.createObjectURL(files[i]);
            }
        } else {
            imageBoxFooter.html('');
            imageBoxFooter.html('<p>No image selected.</p>');
        }
    });

使用Javascript Diemensions Validations上传多个文件

1 个答案: