Base64-кодирование файла перед отправкой формы

@Abracadabra1 · Регистрация: 23.09.2015

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
<form method="POST" action="http://тут_адрес_отправки_запроса" enctype="multipart/form-data">
  <input type="file" name="FILE">
  <input type="submit" value="Отправить">
</form>

необходимо перед отправкой формы перекодировать файл в base64. Нашёл вот такой способ

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function base64_encode(data) {
  
  var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
  var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
    ac = 0,
    enc = '',
    tmp_arr = [];
 
  if (!data) {
    return data;
  }
 
  do { // pack three octets into four hexets
    o1 = data.charCodeAt(i++);
    o2 = data.charCodeAt(i++);
    o3 = data.charCodeAt(i++);
 
    bits = o1 << 16 | o2 << 8 | o3;
 
    h1 = bits >> 18 & 0x3f;
    h2 = bits >> 12 & 0x3f;
    h3 = bits >> 6 & 0x3f;
    h4 = bits & 0x3f;
 
    // use hexets to index into b64, and append result to encoded string
    tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
  } while (i < data.length);
 
  enc = tmp_arr.join('');
 
  var r = data.length % 3;
 
  return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
}

Но не могу разобраться как собрать всё вместе, чтобы заработало.

@cyb0rg_01 · 23.09.2015, 12:53

HTML5
1
2
3
4
<form method="POST" action="http://тут_адрес_отправки_запроса" enctype="multipart/form-data">
  <input id="uploadFile" type="file" name="FILE">
  <input type="button" onclick="sendData()" value="Отправить">
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
var data = null;
$("#uploadFile").on("change", function () {
            var input = $("#uploadFile")[0];
            var file = input.files[0];
            var reader = new FileReader();
            reader.onload = function (e) { 
               data = e.target.result 
            };
            reader.readAsDataURL(file);
        });
 
sendData()
{
    if(data == null)
    {
        alert("Ошибка");
        return;
    }
    $.ajax({
                url: "url для отправки",
                type: "POST",
                data: { data: base64_encode(data) },
                dataType: "text",
                success: function (response) {
                    alert("Отправлено");
                },
                error: function (er) {
                    alert("Ошибка");
                }
      });
}
 
function base64_encode(data) {
  
  var b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
  var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
    ac = 0,
    enc = '',
    tmp_arr = [];
 
  if (!data) {
    return data;
  }
 
  do { // pack three octets into four hexets
    o1 = data.charCodeAt(i++);
    o2 = data.charCodeAt(i++);
    o3 = data.charCodeAt(i++);
 
    bits = o1 << 16 | o2 << 8 | o3;
 
    h1 = bits >> 18 & 0x3f;
    h2 = bits >> 12 & 0x3f;
    h3 = bits >> 6 & 0x3f;
    h4 = bits & 0x3f;
 
    // use hexets to index into b64, and append result to encoded string
    tmp_arr[ac++] = b64.charAt(h1) + b64.charAt(h2) + b64.charAt(h3) + b64.charAt(h4);
  } while (i < data.length);
 
  enc = tmp_arr.join('');
 
  var r = data.length % 3;
 
  return (r ? enc.slice(0, r - 3) : enc) + '==='.slice(r || 3);
}

@Vladislav WebDev · 23.09.2015, 12:54

Сообщение от Abracadabra1

необходимо перед отправкой формы перекодировать файл в base64

Зачем такие извращения? Отправляете файл на сервак, а там его енкодите в бэйс64 и усе

@Abracadabra1 · 23.09.2015, 13:06 **[ТС]**

Vladislav WebDev, данные отправляются на сервер 1С, где запущена 1С web-служба, которая принимает эти данные.
Тут я тоже не силён. Администратор сказал, что надо чтобы данные приходили в base64

@Vladislav WebDev · 23.09.2015, 13:10

Не по теме:

Понял

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@Abracadabra1 0 / 0 / 0 Регистрация: 23.09.2015 Сообщений: 2
	23.09.2015, 13:06 [ТС]
	Vladislav WebDev, данные отправляются на сервер 1С, где запущена 1С web-служба, которая принимает эти данные. Тут я тоже не силён. Администратор сказал, что надо чтобы данные приходили в base64 0

@Vladislav WebDev
	23.09.2015, 13:10
	Не по теме: Понял 0