Как отправлять файлы через type='file' на js скрипт?

[dimensi]

Нашел на хабхабре статью, о том как посылать письма использую почтовый сервис через JS язык. Сначала у меня были проблемы с тем, чтоб просто отправлять письма ибо знания в js у меня очень слабые. Учил учил, а материал не закрепил, поэтому одни сплошные дыры в ajax, js и в dom. Сначала я понял как прицепить к кнопке функцию и посылать письмо. Потом после долгих поисков в google нашел способ как с помощью формы посылать письма.

var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('POST', 'https://mandrillapp.com/api/1.0/messages/send.json');
xmlhttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) alert('Спасибо за заявку, в скором времени вам перезвоним!')
        else if(xmlhttp.status == 500) alert('Check apikey')
        else alert('Request error');
    }
}

window.addEventListener('DOMContentLoaded', function(){
     var form = document.querySelector('#sendForm');
    
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        sendMail(this.elements.sub.value, this.elements.text.value);
      }, false);
}, false);

function sendMail(sub, text){ 
	xmlhttp.send(JSON.stringify({'key': 'puturApikey',
   'message': {
       'from_email': 'test@mail.ru',
       'to': [{'email': 'totest@mail.ru', 'type': 'to'}],
       'autotext': 'true',
       'subject': sub
       'html': text
    }}));}

Я был несказанно рад своему открытию и возможности посылать письмо через этот скрипт с помощью формы. Дальше я узнал в API почтового сервиса могу еще и файлы прикреплять и изображения.

Я подумал, что добавление this.elements.images.value хватит, чтоб посылать файлы, но понял, что не прав. Я так понял, что я должен вытаскивать из файлы тип файла, название файла и base64 файла. Как это сделать, я в гугле не нашел. А быстрое пролистывание учебника вашего ресурса тоже не помогло. Скажите, как реализовать отправку изображений через обычный input type=file? Чтоб сразу несколько можно было. Заранее спасибо.

[laimas]

Как это сделать, я в гугле не нашел.

Смотря что искать - filereader.

[Aetae]

Примерно так, однако фалы читать могут только современные браузеры

var xmlhttp = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open('POST', 'https://mandrillapp.com/api/1.0/messages/send.json');
xmlhttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) alert('Спасибо за заявку, в скором времени вам перезвоним!')
        else if(xmlhttp.status == 500) alert('Check apikey')
        else alert('Request error');
    }
}

 
window.addEventListener('DOMContentLoaded', function(){    
    var form = document.querySelector('#sendForm');   
    var attachments = [];       
    var submit = form.querySelector('input[type="submit"]');
    var files = form.querySelector('#files');
    
    files.addEventListener('change', function() {
        var files = this.files, i = files.length;  
        if(!i) return attachments = [];   
        submit.disbled = true; //не даём отправлять форму пока не подгрузит аттачи
        
        var reader  = new FileReader();
        var newAttachments = [];
        reader.onload = function () {
            var index = reader.result.indexOf(';base64,');
            newAttachments.push({       
                type: reader.result.slice(5, index),
                name: files[i].name,
                content: reader.result.slice(index + 8)
            });
            if(i--) reader.readAsDataURL(files[i]); 
            else {
                submit.disbled = false;
                attachments = newAttachments;
            };
        }
        reader.readAsDataURL(files[--i]);
    }, false);
    

    form.addEventListener('submit', function (e) {
        e.preventDefault();
        sendMail(this.elements.sub.value, this.elements.text.value, attachments);
    }, false);
}, false);
 

function sendMail(sub, text, attachments){
    xmlhttp.send(JSON.stringify({'key': 'puturApikey',
   'message': {
       'from_email': 'test@mail.ru',
       'to': [{'email': 'totest@mail.ru', 'type': 'to'}],
       'autotext': 'true',
       'subject': sub,
       'html': text,
       'attachments': attachments
	}}));
}

[dimensi]

Все отлично работает, спасибо вам большое. Еще вопрос как сделать ограничение по размеру файла и количеству файлов? Есть поставить значение мультипли, то он грузит, несколько файлов, что круто, но одновременно плохо, потому, что если захотят отправить 20 фоток или 10 фоток по 10мб, то это капец же будет) Заранее спасибо.

[laimas]

Еще вопрос как сделать ограничение по размеру файла и количеству файлов?

То есть читать не хотим? Загруженные изображения, это их массив files, а это i = files.length; их количество. И кроме имени загружаемого файла files[i].name, можно получить и его размер в байтах - files[i].size.

Количество загружаемых файлов, размер одного загружаемого файла и общий размер загружаемых данных, эти параметры определяются сервером.

[dimensi]

Ну не то что бы не хочу читать, просто я не хрена не понимаю. Я это прочитал, но не хрена не понял. Разве на клиентской стороне нельзя сделать ограничения? Я знаю, что их можно обойти, но это будет защита от дурака обычного, а не продвинутого.

[laimas]

Разве на клиентской стороне нельзя сделать ограничения?

Почему нельзя, можно, но нужно руководствоваться ограничением сервера, то есть сервисом, которым вы пользуетесь. Другими словами, нельзя на клиенте выставить максимум больший, чем определен сервером.
К тому же, на отправку почты обычно также накладываются ограничения, такие как одновременно отправляемых сообщений в единицу времени (вас это не лимитирует, если только ваша цель не рассылка), размер почтового сообщения, в частности размер прикрепленных к нему файлов.

Все эти параметры нужно знать.

[dimensi]

Моя цель создать форму обратного вызова. Человек пишет данные, прикрепляет фотки и на почту приходит сообщение. Я просто хочу сделать ограничение в 10 файлов и 3 мб размер фотки. Я понял, что я должен выставить if else и в ней поставить ограничение на размер и количество. Но как это сделать, я не знаю.

[laimas]

ограничение в 10 файлов и 3 мб размер

Данные в base64 это почти в три раза больший объем данных, чем исходные. 10 * 3 * 3 = 90 МБ. Вы уверены, что такой размер почтового отправления этот сервис примет?

А проверить, это: если files.length > 10 или files[i].size > 3145728, то или выход, или сообщение и выход, не знаю чего вам нужно. А проверку производить перед reader.onload = function () {...

[dimensi]

Ну я отправил 20 фотографий по 1мб-5мб, он все прислал :/