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

时间:2015-04-01 16:57:30

标签: javascript ajax

我想知道它有长度限制吗? 我发送图像和一些数据到我的服务器,但它返回它无法“找到”所需的数据。有时它可以,有时它无法找到它。 它变得非常令人沮丧,因为我无法找到问题。我将图像作为dataURL发送。 服务器一无所获。就像有一个空的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()]);
    }

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

如果有帮助,我可以链接到可以检出的网页。

EDIT ------------- 所以似乎有些图片无法发送。个别和其他人。有些图片可以单独发送,但不能与其他图片一起发送。有些图片可以单独发送,也可以发送其他图片。这真的很奇怪。

1 个答案:

答案 0 :(得分:0)

所以真正的答案就是@Barmar所说的。我查看了我发送的文件的大小,看起来没问题,但我没想到的是我没有将图像作为文件发送,而是作为数据URL发送。这意味着文件大小无关紧要。而且我必须实际增加实际的帖子大小。