Ajax调用,发送图像和其他数据

Ajax calls, sending images and other data

本文关键字:其他 数据 图像 调用 Ajax      更新时间:2023-09-26

我想知道它有长度限制吗?我将图像和一些数据发送到我的服务器,但它返回无法"找到"所需的数据。有时它可以,有时它找不到。这真的很令人沮丧,因为我找不到问题所在。我将图像作为数据URL发送。服务器什么也得不到。这就像有一个空的formData,但通过检查检查工具,数据写入正确。

还有什么我可以检查的吗?

过帐代码:

var ID = this.id.substr(11);
        if (!user) {
            if (document.getElementById('userName').value.length < 1) {
                Listing.alert('{{trans('adsAdd.enterName')}}', true);
                $('#userName').parent().addClass('has-error');
                $('#userName').addClass('has-error');
                return;
            }
            if (document.getElementById('userPhone').value < 1) {
                Listing.alert('{{trans('adsAdd.enterPhone')}}', true);
                $('#userPhone').parent().addClass('has-error');
                $('#userPhone').addClass('has-error');
                return;
            }
            if (document.getElementById('userCity').value < 1) {
                Listing.alert('{{trans('adsAdd.enterCity')}}', true);
                $('#userCity').parent().addClass('has-error');
                $('#userCity').addClass('has-error');
                return;
            }
            if (document.getElementById('userEmail').value < 1) {
                Listing.alert('{{trans('adsAdd.enterEmail')}}', true);
                $('#userEmail').parent().addClass('has-error');
                $('#userEmail').addClass('has-error');
                return;
            }
        }
        if (document.getElementById('price-' + ID).value.length < 1) {
            Listing.alert('{{trans('adsAdd.enterPrice')}}', true);
            $('#price-' + ID).parent().addClass('has-error');
            $('#price-' + ID).addClass('has-error');
            return;
        }
        if (document.getElementById('description-' + ID).value.length < 1) {
            Listing.alert('{{trans('adsAdd.enterDescription')}}', true);
            $('#description-' + ID).parent().addClass('has-error');
            $('#description-' + ID).addClass('has-error');
            return;
        }
        var formData = new FormData();
        var images = [];
        $('#img-div-' + ID).find('.img-outer-div').each(function (index, imgElement) {
            var img = $(imgElement).find('.item-image');
            images.push(img.attr('src'));
        });
        formData.append('images', JSON.stringify(images));
        formData.append('category', document.getElementById('category-' + ID).options[document.getElementById('category-' + ID).selectedIndex].text);
        formData.append('price', document.getElementById('price-' + ID).value);

        formData.append('description', document.getElementById('description-' + ID).value);
        formData.append('time', document.getElementById('time-' + ID).selectedIndex);
        formData.append('type', (document.getElementById('type-' + ID) != null) ? document.getElementById('type-' + ID).selectedIndex : 0);
        formData.append('lang', '{{App::getLocale()}}');
        if (!user) {
            formData.append('userName', document.getElementById('userName').value);
            formData.append('userPhone', document.getElementById('userPhone').value);
            formData.append('userCity', document.getElementById('userCity').value);
            formData.append('userEmail', document.getElementById('userEmail').value);
        }
        formData.append('id', ID);
        $(this).attr('disabled', 'true');
        var req = new XMLHttpRequest();
        req.open('post', '/items/add');
        req.send(formData);
        req.addEventListener('load', function () {
            var obj = $.parseJSON(req.response);
            if (obj['message'] != null) {
                if (obj['message']['email']) {
                    Listing.alert(obj['message']['email'], false);
                } else if (obj['message']['phone']) {
                    Listing.alert(obj['message']['phone'], false);
                } else if (obj['message']) {
                    Listing.alert(obj['message'], false);
                }
            }
            var id = obj['id'];
            var item = $('#item-' + id);
            if (obj['success']) {
                item.empty();
                item.append('<div class="alert alert-box" id="alert">{{trans('adsAdd.done')}}</div>');
                item.fadeOut(4000);
                if (!user) {
                    window.location.replace("{{URL::route('home-index')}}");
                }
            } else {
                item.find('button').prop('disabled', null);
                item.find('button').innerHTML = '{{trans('adsAdd.send')}}';
            }
        });
        this.innerHTML = '{{trans('adsAdd.sending')}}';

和php代码:

$message = null; // Message for user
    $locale = Input::get('lang');
    // Item
    $data = array(
        'category' => Input::get('category'),
        'price' => Input::get('price'),
        'description' => Input::get('description'),
        'images' => json_decode(Input::get('images')),
        'time' => Input::get('time'),
        'type' => (Input::get('type') == null) ? 0 : Input::get('type'),
    );

    $validator = Validator::make($data, array(
        'description' => 'required',
        'price' => 'required',
        'category' => 'required',
        'images' => 'required|max:10',
        'time' => 'required',
        'type' => 'required',
    ));
    if($validator->fails()) {           
        return Response::json(['success' => false, 'message' => $validator->errors()->first()]);
    }

它只到达验证器失败的部分。如果它没有失败,并且数据实际上被发送到服务器,它就会保存它,一切都很好。

如果有帮助,我可以提供一个网页链接,在那里可以查看。

编辑-------------看来有些图片无法发送。单独或与他人合作。有些图片可以单独发送,但不能与其他图片一起发送。一些图片可以单独发送,其他图片也可以发送。这真的很奇怪。

所以真正的答案是@Barmar到底说了什么。我看了看我发送的文件的大小,看起来还可以,但我没有想到的是,我没有把图像作为文件发送,而是作为数据URL发送。这意味着文件大小无关紧要。实际上,我不得不增加实际的帖子大小。