2

Здравствуйте. Не понимаю, что не так?

var errimg = new Array();

function addFile(file) {
 
    var img = new FileReader();
    
    img.onload = (function (e) {
        var image = new Image();

        errimg = check_image(file[0], image);
        console.log('errimg1: ',errimg);
        if ( errimg.length > 0 ) {
        } else {
        } 
    });    
    console.log('errimg2: ',errimg);

    return errimg;
}

результат выполнения такой:

errimg1: что то есть

errimg2: ничего нет

upd:

Вот код который я выполняю.

$('#avatar-user').on('change', function(Event) {
    var answer = addFile(this.files);

    if (answer.length == 0) {
        $.arcticmodal('close');

        $('#upl-modal').arcticmodal();

    } else {
        $('#err-upload-avatar').arcticmodal();
        $('#err-upload-avatar').append('<div>'+answer[0]+'</div>');
    }
});

var errimg;

function addFile(file) {
    var img = new FileReader();

    errimg = new Array();

    img.onload = (function (e) {
        var image = new Image();
        image.src = e.target.result;

        errimg = check_image(file[0], image);
        console.log(errimg);

        if ( errimg.length > 0 ) {
        } else {
            $('#testqwe').attr('src', image.src);
            $('#testqwe').Jcrop({
                minSize: [480, 640],
                setSelect: [0, 0, 110, 110],
                bgOpacity:.3,
                bgColor: 'cyan'
            })
        } 
    });    
    console.log(errimg);

    img.file = file[0];
    img.readAsDataURL(file[0]);

    return errimg;
}

function check_image(file, image) {
    var information = new Array();

    var reg_extension = /\.(?:jpg|jpeg|png|gif)$/i;
    var extension= file.name.match(reg_extension);

    if (extension == null) {
        information.push('Image format: *.jpg, *.png, *.gif.');
        return information;
    }

    if (image.width <= 480 && image.height <= 640) {
        information.push('Width >= 480 && Height >= 640');
        return information;
    }

    if (file.size > 10485760) {
        information.push('Max size upload image == 10 Mb.');
        return information;
    }
}

Результат:

img

6
  • @Yura Ivanov, не правда, вот результат выполнения, только он почему то в разном порядке.
    – Artie Lay
    22 июн 2014 в 7:53
  • и что тут неправильно? img.onload выполнится только когда изображение загрузится/достанется из кэша, а до этого это просто array.
    – etki
    22 июн 2014 в 8:11
  • @Fike, я просто в js совсем недавно, не могли бы вы подсказать, как тогда сделать, чтобы массив можно было вернуть с данными об ошибке.
    – Artie Lay
    22 июн 2014 в 8:23
  • 1
    @artemiy, напрямую - никак. Суть в том, что когда задется коллбэк на событие, он существует вне основного скрипта: у него та же область видимости и те же переменные, но "вернуться" в основной скрипт не получится. В обычном программировании это называется многопоточностью, и там есть инструменты для ожидания результатов потоков, которых нет в js. Что получится - это в коллбэке вызвать другой коллбэк, который выполнит то, что нужно. Например, если ожидается загрузка всех изображений, то каждый коллбэк должен проверять перед выполнением, все ли изображения загрузились - выполнится последний ->
    – etki
    22 июн 2014 в 9:41
  • 1
    который теперь и будет "основным скриптом". Прошу прощения за отсутствие внятной терминологии.
    – etki
    22 июн 2014 в 9:42

1 ответ 1

2
  1. Глобальная переменная errimg не нужна
  2. в addFile передаете свой колбэк
  3. в onload вызываете этот колбэк
  4. в принципе второй раз создавать image не надо, достаточно вашего img
  5. Изменил чуть вывод ошибок (если их несколько)

Так:

$('#avatar-user').on('change', function(Event) {
    addFile(this.files, function(err){

        if (!err.length) {
            $.arcticmodal('close');
            $('#upl-modal').arcticmodal();
        } else {
            $('#err-upload-avatar').arcticmodal();
            $('#err-upload-avatar').append('<div>'+err.join('<br>')+'</div>');
        }
    });
});

function addFile(file, cb) {
    var img = new FileReader();

    img.onload = (function (e) {
        var errimg = check_image(file[0], img);
        if ( errimg.length > 0 ) {
        } else {
            $('#testqwe').attr('src', img.src);
            $('#testqwe').Jcrop({
                minSize: [480, 640],
                setSelect: [0, 0, 110, 110],
                bgOpacity:.3,
                bgColor: 'cyan'
            })
        } 
        cb(errimg);
    });

    img.file = file[0];
    img.readAsDataURL(file[0]);
}

function check_image(file, image) {
    var information = [];

    var reg_extension = /\.(?:jpg|jpeg|png|gif)$/i;
    var extension= file.name.match(reg_extension);

    if (extension == null) {
        information.push('Image format: *.jpg, *.png, *.gif.');
    }

    if (image.width <= 480 && image.height <= 640) {
        information.push('Width >= 480 && Height >= 640');
    }

    if (file.size > 10485760) {
        information.push('Max size upload image == 10 Mb.');
    }
    return information;
}
0

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.