0 / 0 / 0
Регистрация: 23.09.2015
Сообщений: 2

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

23.09.2015, 12:43. Показов 4976. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день, уважаемые программисты. Я очень мало понимаю в 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);
}
Но не могу разобраться как собрать всё вместе, чтобы заработало.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
23.09.2015, 12:43
Ответы с готовыми решениями:

Выполнение функции перед отправкой формы
Cделал маленькую проверку перед отправкой, а точнее чтобы в бд записывалось, кто и сколько раз отправил форму: &lt;script...

javascript проверка формы перед отправкой
как проверить все формы заполнены перед нажатием кнопки отправить &lt;!doctype html&gt; &lt;head&gt; &lt;meta...

Выполнение действий перед отправкой формы
Хочу сделать чтобы после нажатия на &lt;input type=&quot;submit&quot;&gt; выезжал свержу блок. Делаю я это так: &lt;input type=&quot;submit&quot;...

4
Фрилансер
735 / 352 / 96
Регистрация: 05.05.2014
Сообщений: 2,621
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);
}
0
 Аватар для Vladislav WebDev
327 / 217 / 97
Регистрация: 04.11.2012
Сообщений: 638
23.09.2015, 12:54
Цитата Сообщение от Abracadabra1 Посмотреть сообщение
необходимо перед отправкой формы перекодировать файл в base64
Зачем такие извращения? Отправляете файл на сервак, а там его енкодите в бэйс64 и усе
0
0 / 0 / 0
Регистрация: 23.09.2015
Сообщений: 2
23.09.2015, 13:06  [ТС]
Vladislav WebDev, данные отправляются на сервер 1С, где запущена 1С web-служба, которая принимает эти данные.
Тут я тоже не силён. Администратор сказал, что надо чтобы данные приходили в base64
0
23.09.2015, 13:10

Не по теме:

Понял

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.09.2015, 13:10
Помогаю со студенческими работами здесь

Проврка полей формы перед отправкой на сервер
Нужно проветить форму на наличие пустых полей. Если найдено пустое поле, название поля выделяется красным и вверху формы выводится...

Как сделать задержку перед отправкой формы
Есть форма регистрации &lt;form method=&quot;POST&quot; action=&quot;#&quot; id=&quot;regform&quot; name=&quot;regreg&quot; enctype=&quot;multipart/form-data&quot;&gt; &lt;input...

Запрос подтверждения перед отправкой данных с формы на сервер
Подскажите как сделать, что бы перед отправкой на сервер данных с формы, появилось окно подтверждения и при выборе отмены данные не были...

Нужно выполнить проверку полей на стороне клиента перед отправкой на сервер данных формы.
Такая вот проблема. Имеет место быть форма с кнопкой типа submit. Нужно выполнить проверку полей на стороне клиента перед отправкой на...

Проверка формы перед отправкой
Приветствую всех. Прошу помочь с написанием кода для проверки формы перед отправкой. Точнее, подправить, поскольку сам не могу сообразить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

Новые блоги и статьи
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru