0

Этот пример, отвечает за проверку файлов изображений, то есть mime type и размер файла, до отправки на сервер. При вызове её обработчиком onchange элементом input type file функции передаётся в параметрах ссылку на dom-объект элемента и максимально допустимый размер файла в байтах. После прохождении проверки, элементу output, который должен быть последнем дочерним элементом своего родителя, должен быть присвоен соответствующий результату проверки класс и сообщение. http://jsbin.com/kuhicedoya/edit?html,output

<style type="text/css">
    .good
    {
        font-weight:bold;
        color:green;
    }
    .bad
    {
        font-weight:bold;
        color:red;
    }
</style>

<form name="goodsForm" onsubmit="ajax(this,'/goods');" action="javascript:void(0);" method="post" enctype="multipart/form-data">
    <div><label for="g5">Image 1:</label><input type="file" id="g5" name="img0" onchange="imgVal(this,10485760);"/><output id="outImg0"></output></div>
    <div><label for="g6">Image 2:</label><input type="file" id="g6" name="img1" onchange="imgVal(this,10485760);"/><output id="outImg1"></output></div>
    <div><label for="g7">Image 3:</label><input type="file" id="g7" name="img2" onchange="imgVal(this,10485760);"/><output id="outImg2"></output></div>
    <div><label for="g8">Image 4:</label><input type="file" id="g8" name="img3" onchange="imgVal(this,10485760);"/><output id="outImg3"></output></div>
    <div><label for="g9">Image 5:</label><input type="file" id="g9" name="img4" onchange="imgVal(this,10485760);"/><output id="outImg4"></output></div>
</form>

function imgVal(el,lim)
{
    var doc=el.parentNode.lastChild;
    if(el.files[0].size<=lim)
    {
        var file=new FileReader();
        file.onloadend=function(e)
        {
            var arr=(new Uint8Array(e.target.result)).subarray(0,4);
            for(var i=0,l=arr.length,header='';i<l;i++)
                header+=arr[i].toString(16);
            var type=false;
            switch(header){case'89504e47':type='PNG';break;case'47494638':type='GIF';break;case'ffd8ffe0':case'ffd8ffe1':case'ffd8ffe2':type='JPG';break;}
            if (type)
            {
                doc.setAttribute('class','good');
                doc.innerHTML=Math.round(el.files[0].size/1024)+'kB'+' '+type;
            }
            else
            {
                el.value=null;
                doc.setAttribute('class','bad');
                doc.value='Supported image only JPG PNG GIF';
            }
        };
        file.readAsArrayBuffer(el.files[0]);
    }
    else
    {
        el.value=null;
        doc.setAttribute('class','bad');
        doc.value='File size should be less than 10 MB';
    }
}
4
  • 1
    а как вы используете doc, el внутри если они не передаются? Commented 22 мая 2016 в 12:53
  • Так в том-то и проблема, что они НЕ передаются. Я вот и прошу помощи, как сделать так, что бы они передавались или как по другому переписать эту функцию. Commented 22 мая 2016 в 13:54
  • 1
    почему же не передается элемент? передается jsbin.com/sofugunanu/edit?html,output Commented 22 мая 2016 в 14:23
  • Ё-маё! Вы правы. Всё работает. :-) jsbin.com/duqonesubo/edit?html,output Ошибка была у меня, когда я пытался их переопределить. Commented 22 мая 2016 в 15:10

1 ответ 1

1

Разобрались в комментариях. Пример по теме http://jsbin.com/duqonesubo/edit?html,output

window.onload = function() {
    document.getElementsByName('img')[0].addEventListener('change', imgVal, false);
}

function imgVal(e) {
    console.log(e.target);
}

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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