Как отправить файл на сервер

Как отправить файл на сервер

В общем случае клиент и сервер 1С — это разные компьютеры с различной файловой системой. Рассмотрим как правильно передать файл с компьютера клиента на компьютер сервера.

Метод асинхронной передачи файла на сервер

Обмен файлом между клиентом и сервером осуществляется через временное хранилище. Для помещения данных во временное хранилище правильно воспользоваться методом

НачатьПомещениеФайла ( ОписаниеОповещенияОЗавершении >, Адрес >, ПомещаемыйФайл >, Интерактивно >, УникальныйИдентификаторФормы >, ОписаниеОповещенияПередНачаломПомещенияФайла >)

Метод работает в асинхронном режиме. Возможны два варианта выбора файла для передачи на сервер:

  • интерактивной режим, при котором пользователю будет выдан диалог выбора файла;
  • неинтерактивный режим, при котором уже известен путь к требуемому файлу на компьютере клиента. Такое возможно, например, когда пользователь в отдельном поле ввода выбрал путь к обрабатываемому файлу. Такой сценарий описан в этой статье.

Параметр ОписаниеОповещенияОЗавершении содержит описание процедуры (тип ОписаниеОповещения), которая будет вызвана после завершения помещения файла во временное хранилище. Эта процедура должна иметь ключевое слово Экспорт и 4 параметра:

  • Результат — для интерактивного режима возвращает результат работы пользователя с окном выбора файла. Истина — пользователь выбрал файл; Ложь — пользователь отказался от выбора;
  • Адрес — адрес временного хранилища;
  • ПомещаемыйФайл — путь к файлу;
  • ДополнительныеПараметры — значение, указанное при создании объекта ОписаниеОповещения.

Следует обратить внимание на параметр УникальныйИдентификаторФормы. В него рекомендуется передавать идентификатор текущей формы для сохранения данных во временном хранилище между несколькими серверными вызовами. При закрытии формы данные из временного хранилища будут автоматически удалены.

Неинтерактивная передача файла на сервер

Рассмотрим пример неинтерактивной передачи файла на сервер, без вызова окна выбора файла:

&НаКлиенте
Процедура ЗагрузитьФайл ( Команда )

ИмяФайлаДляОбработки = «C:ДанныеДляЗагрузки.xml» ;
// Описание процедуры, которая будет вызвана помещения файла во временное хранилище
ОписаниеОповещения = Новый ОписаниеОповещения ( «ЗагрузитьФайлЗавершение» , ЭтотОбъект );
// Начало помещение файла из файловой системы во временное хранилище
НачатьПомещениеФайла ( ОписаниеОповещения , , ИмяФайлаДляОбработки , Ложь, УникальныйИдентификатор );

&НаКлиенте
Процедура ЗагрузитьФайлЗавершение ( Результат , Адрес , ВыбранноеИмяФайла , ДополнительныеПараметры ) Экспорт

&НаСервере
Процедура ВыполнитьЗагрузкуНаСервере ( Адрес )

// Получение данных из временного хранилища
Данные = ПолучитьИзВременногоХранилища ( Адрес );
// Получение имени временного файла
ИмяВременногоФайла = ПолучитьИмяВременногоФайла ( «xml» );
// Сохранение данных во временный файл
Данные.Записать ( ИмяВременногоФайла );

// Хорошим тоном будет удалить временный файл
Попытка

При интерактивном выборе файла дополнительно необходимо предусмотреть два момента:

  • указать настройки диалога выбора файла (если требуется);
  • проверять, что пользователь действительно выбрал файл.

Интерактивная передача файла на сервер

Рассмотрим, пример интерактивной передачи файла на сервер:

&НаКлиенте
Процедура ЗагрузитьФайлИнтерактивно ( Команда )

// Описание процедуры, которая будет вызвана после закрытия окна выбора файла
ОписаниеОповещения = Новый ОписаниеОповещения ( «ЗагрузитьФайлЗавершение» , ЭтотОбъект );
// Описание диалога выбора файла
Диалог = Новый ДиалогВыбораФайла ( РежимДиалогаВыбораФайла . Открытие );
Диалог . Фильтр = НСтр ( «ru=’Файл XML (*.xml)|*.xml’» );
// Начало помещение файла из файловой системы во временное хранилище
НачатьПомещениеФайла ( ОписаниеОповещения , , Диалог , Истина, УникальныйИдентификатор );

&НаКлиенте
Процедура ЗагрузитьФайлЗавершение(Результат, Адрес, ВыбранноеИмяФайла, ДополнительныеПараметры ) Экспорт

// Файл выбран
ВыполнитьЗагрузкуНаСервере ( Адрес );

// Пользователь отказался от выбора файла
Сообщить ( «Файл не был выбран» );

Процедура ВыполнитьЗагрузкуНаСервере при интерактивном и неинтерактивном режимах одинаковая.

Передача файла на сервер средствами БСП

В конфигурациях со встроенной Библиотекой стандартных подсистем для передачи файлов с клиента на сервер можно использовать процедуры

ЗагрузитьФайл ( ОбработчикЗавершения , ПараметрыЗагрузки = Неопределено, ИмяФайла = «» , АдресВоВременномХранилище = «» ) Экспорт

ЗагрузитьФайлы ( ОбработчикЗавершения , ПараметрыЗагрузки = Неопределено, ЗагружаемыеФайлы = Неопределено) Экспорт

общего модуля ФайловаяСистемаКлиент или

ВыбратьИПередатьФайлНаСервер ( ОповещениеЗавершения , Знач ПараметрыДиалога = Неопределено, Знач ИдентификаторФормы = Неопределено) Экспорт

общего модуля ОбменДаннымиКлиент.

Пример интерактивной загрузки файла на сервер средствами БСП:

&НаКлиенте
Процедура ЗагрузитьФайлИнтерактивно ( Команда )

ПараметрыДиалога = Новый Структура ;
ПараметрыДиалога . Вставить ( «Заголовок» , НСтр ( «ru = ‘Выберите файл XML’» ));
ПараметрыДиалога . Вставить ( «Фильтр» , НСтр ( «ru=’Файл XML (*.xml)|*.xml’» ));

Оповещение = Новый ОписаниеОповещения ( «ЗагрузитьФайлЗавершение» , ЭтотОбъект );
ОбменДаннымиКлиент . ВыбратьИПередатьФайлНаСервер ( Оповещение , ПараметрыДиалога , УникальныйИдентификатор );

&НаКлиенте
Процедура ЗагрузитьФайлЗавершение (Знач РезультатПомещенияФайлов , Знач ДополнительныеПараметры ) Экспорт

Адрес = РезультатПомещенияФайлов . Хранение ;
ТекстОшибки = РезультатПомещенияФайлов . ОписаниеОшибки ;
ИмяВыбранногоФайла = РезультатПомещенияФайлов . Имя ;

Если ПустаяСтрока ( ТекстОшибки ) И ПустаяСтрока ( Адрес ) Тогда

ТекстОшибки = НСтр ( «ru = ‘Ошибка передачи файла на сервер’» );

Если НЕ ПустаяСтрока ( ТекстОшибки ) Тогда

ОбщегоНазначенияКлиентСервер . СообщитьПользователю ( ТекстОшибки );
Возврат;

Читайте также:  0Xe0434352 в приложении по адресу

Остались вопросы?
Спросите в комментариях к статье.

Сегодня я хочу рассказать, как отправить файлы на сервер из html-формы. Обычно эта процедура не вызывает никаких затруднений: кодировка multipart/form-data у формы, input type="file" и все. Остается принять файлы на сервере и скопировать их в нужное место.

Но мы сделаем интереснее, отправим файлы с помощью ajax, без перезагрузки страницы. А также посмотрим, как валидировать файлы на клиенте и сервере, а именно проверять максимальный размер загружаемых файлов и допустимые расширения.

Суть задачи

По итогу статьи у нас получится небольшое приложение, которое отрисует форму с тремя полями ввода и кнопкой Отправить. Будем считать, что мы хотим получить от пользователей три файла-картинки. При этом нужно задать максимальный размер загружаемых файлов и ограничить набор расширений. Проверять файлы нужно как на клиенте, для удобства пользователей, так и на сервере, для защиты от возможных атак. Если обе проверки пройдены, то скопируем файлы на сервере в папку upload.

Для нетерпеливых сразу ссылки на демо приложения и исходники

Подготовим шаблон проекта.

В корень проекта положим файл index.html, в папку js файлы jquery.min.js и main.js (не забудем их подключить в index.html). Серверный код будет выполнять upload.php из папки php, а для полученных файлов создадим папку upload.

Получится так:

html-заготовка формы

Создадим простейшую форму в index.html

Заметим, что никаких атрибутов, вроде enctype у формы или name у input-ов, навешивать не нужно — все сделает javascript.

Базовый клиентский код

Мы создали модуль приложения app, и в методе init подключили обработку сабмита формы. В функции submitForm данные для отправки готовятся с помощью объекта formdata соответствующего класса FormData. Перебирая все поля выбора файлов .js-photos, мы добавляем файлы к этому объекту методом append. Обратите внимание на название photos[] — квадратные скобки обязательны, так как в противном случае на сервер попадет не массив файлов, а только один.

Дальше в настройках метода $.ajax указываем стандартные параметры url, data и type. Отправляем данные, конечно, POST-ом. processData и contentType нужно отключить. Поставим dataType = "json", так как именно в этом формате сервер будет возвращать ответ. multipart/form-data опять не указывается явно, потому что она проставляется сама при использовании объекта FormData. Разумеется, кроме файлов Вы можете отправить и еще какие угодно данные, добавив их в formdata, например так: formdata.append(‘name’, ‘John’);

Валидацию пока не делаем, рассмотрим ее ниже. А пока переходим к серверной части.

Принимаем файлы на сервере и перемещаем в нужную папку

Код обработки файлов на сервере довольно типовой, сначала привожу его, а потом кратко поясню

Сначала мы извлекаем массив файлов из $_FILES[‘photos’] и отпределяем папку назначения — куда мы копируем искомые файлы. PHP предварительно копирует файлы во временную папку, свойство tmp_name из $_FILES даст нам полный путь к этому временному файлу. Далее перебираем наш массив и перемещаем файлы в нужную папку под тем же названием, с которым он пришел с клиента. Этим занимается функция move_uploaded_file. В конце возвращаем клиенту успешный код ответа.

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

Валидация файлов на клиенте

Нам нужна функция, которая проверит массив файлов с формы на некоторые условия, а именно:

  • 1. Выбран ли вообще файл
  • 2. Не превышает ли его размер максимальный
  • 3. Подходит ли файл по формату

Если какие-то условия не выполняются, то будем складывать в массив имя файла, в котором произошла ошибка, и указывать код ошибки. Дополнительно укажем, в каком по счету элементе input ошибка.

Например, ошибка может выглядеть так.

Это означает, что в input[0] (в первом по счету поле) пользователь добавил файл test.pdf, формат которого не поддерживается, так как мы просим изображения. Это одна ошибка валидации. А массив таких ошибок и будет результатом выполнения функции. Если ошибок нет, все файлы выбраны и заданы правильно, то вернем пустой массив.

Читайте также:  Какое цифровое тв лучше подключить в москве

Впрочем, сейчас посмотрим, как это работает. Добавим функцию валидации validateFiles.

В параметре options мы передаем объект из трех полей: $files, maxSize и types. Соответственно, это jQuery-массив элементов input, максимальный размер файла в байтах и массив допустимых типов-расширений файлов, например, image/jpg, image/png или application/pdf — список типов легко можно загуглить.

Мы перебираем массив файлов и последовательно делаем проверки. Сначала смотрим, выбран ли вообще файл. Если нет, добавляем в результирующий массив ошибок пукнт с кодом no_file. Это будет объект-ошибка — имени предсказуемо нет. Дальше мы сразу переходим к следующему файлу, проверит размер и расширение мы не сможем.

Проверка на максимальный размер в случае неуспеха вернет объект , а несоответствие типа —

Обратите внимание, если в одном файле ловится несколько ошибок (максимум две в нашем случае), например, test.pdf слишком большого веса, то в результате мы получим 2 объекта. Имеет смысл группировать эти ошибки по имени файла, но не хочется усложнять код. В конце концов, если это необходимо, Вы сможете обработать выводимый результат как угодно.

Функцию написали, осталось задействовать ее в основном потоке кода. Немного расширим код submitForm:

Как видим, мы добавили вызов validateFiles с нужными параметрами. Максимальный размер файла ограничим 2 Мб, а типы возьмем jpg и png-картинки. После вызова проверяем, не пустой ли массив полученных ошибок, и если таки не пустой, то выводим результаты в консоль и выходим из функции сабмита. Файлы на сервер не уйдут.

Как обрабатывать ошибки и показывать их пользователю — дело исключительно хозяйское 🙂 Нам сейчас главное убедиться, что наша валидация работает.

Клиенсткий код закончен, можете побаловаться с файлами, добавить или убрать форматы разрешенных типов или изменить максимальный размер. Наш клиентский код должен точно реагировать на все попытки загрузить "неправильные" файлы. А мы переходим к валидации на стороне сервера.

Валидация файлов на сервере

Вообще для посетителей сайта будет срабатывать клиентская валидация. Тем самым наши посетители получат мгновенную обратную связь, а сервер освободится от ненужной работы. Но в случае получения пользовательских данных всегда нужно проводить дополнительную валидацию на стороне сервера. Этим мы и займемся.

php-шная функция валидации будет проверять ровно те же параметры, что и клиентская. Но кроме двух пунктов: проверки на наличие файла и возврат индекса. Это связано с тем, что мы проверяем все файлы пришедшие с клиента и не знаем, что некоторые клиент мог не заполнить. Лучше увидеть на примере. Напишем саму функцию

Обращаю внимание, что для синхронизации клиента и сервера в обеих функциях валидации используется одинаковый формат объекта-ошибки и коды ошибок. Это облегчит нам обработку ошибок в интерфейсе независимо от того, сработала ли валидация клиентская или серверная.

После этого остается использовать написанную функцию в основном коде

Вот и все. Как видим, валидация на сервере подключена ровно таким же способом, как и на клиенте.

Чтобы убедиться, что и серверная валидация успешно работает, закомментируйте одну строку в main.js

Теперь попробуйте ввести в форму ошибочные данные и увидите, что в консоли выпадет сообщение "client validation errors:" с массивом ошибок от клиентской валидации, а следом "responce from server:" с ошибками от серверной. Ошибки должны быть совершенно идентичными, за исключением no_file на клиенте и отсутствия поля index на сервере.

Например, если Вы пропустите первое поле, во второе загрузите pdf-ку, а в третье — валидную картинку, то увидите примерно такую картину

Недавно, вспомнил как я когда-то работал с компанией, которая занималась производством и продажей деревянных поддонов. Нам часто звонили, яндекс директ — успешно работал и принимая звонки нередко приходилось просить выслать чертеж с размерами на почту, хотя она и висела в правом верхнем углу, над кнопкой заказать звонок.

Читайте также:  Какой нужен ток для зарядки аккумулятора автомобиля

То есть, даже если оставляли заявку, менеджер связывался с клиентом и все равно в телефонном разговоре мы либо диктовали адрес электронной почты, для того чтобы нам выслали чертеж с параметрами поддона, либо просили людей зайти на сайт и на указанную почту отправить свое письмо. Это было не очень удобно, и сегодня я решил разобраться в том, как сделать такую форму, чтобы в нее можно было загрузить файл, например, простым перетягиванием или через проводник. В общем — все как обычно.

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

Форма загрузки файла для сайта

Давайте начнем с того, что нужно сделать — это создать файл index.php, так как в противном случае наша форма не будет работать. Если у кого-то уже был создан index.htm — просто измените расширение. Ничего с вашим landing page не случится. Не паникуйте :). После этого, создадим самую обычную форму, с двумя полями.

— как раз и отвечает за возможность подключать файл через стандартный загрузчик.

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

Для того, чтобы задать приятный внешний вид полю с type=»file» — придется потанцевать с бубном. В сети существует много решений, но я выбрал с использованием javascript. Я нашел такой скрипт, который задает классы для текстового поля, кнопки «Выбрать» и общего контейнера для них.

Скачивайте исходник и найдете его в папке js. Не могу дать ссылку на исходник, так как нашел его на форуме. Он очень маленький — всего 3 кб в неоптимизированном виде. Давайте подключим его (Перед закрывающимся тегом ):

Для вызова плагина воспользуемся следующей конструкцией:

Его можно расположить сразу после подключения самого скрипта.

Давайте теперь разберем классы:

  • Для управления полем в котором будет выводится имя загруженного файла теперь будем пользоваться .fileName
  • Для управления кнопкой, при нажатии на которую открывается окно загрузки — .fileBtn
  • Для управления областью, в которой находятся предыдущие 2 элемента воспользуемся .fileUpload

Для управления текстом внутри кнопки нужно открыть скрипт и в 8 строке изменить мой текст на свой 🙂 Там есть комментарий, поэтому, кто не знаком с javascript — смело открывайте и редактируйте. Даю слово, — вы разберетесь.

Это очень удобно и развязывает руки. Теперь мы можем полностью управлять элементами, которые нас интересуют. Я решил пойти нестандартным путем и создал такой вид:

Если интересно, можете посмотреть стили в исходнике. Статья не о таблицах стилей, поэтому давайте продолжим.

С отправкой файла на почту — не так все просто, как с данными, занесенными в поля формы. Для того, чтобы грамотно обработать файл воспользуемся дополнительным php скриптом. Его нужно скачать и положить рядом с формой. Можете даже не открывать 🙂

Называется он class.phpmailer.php. Готово. Теперь давайте разбираться дальше. Для того, чтобы данные отправлялись к нам на почту вставьте в файл с формой (куда-нибудь в футер) следующий код:

Думаю, основные моменты — понятны, так как она прокомментированы. Да, код не идеален. Можно дописать кучу проверок и т.п. Кто пожелает — милости прошу. Заодно, — поможете остальным.

Мне больше нравится front-end. поэтому я попробую разобраться и протестировать атрибут accept для поля input=»file». Он довольно интересен, и позволяет фильтровать файлы, которые можно загружать в форму, но к сожалению, работает не во всех браузерах. Так гласят форумы 🙂 Вот хочу протестировать самостоятельно и сделать свои выводы. Попробую на днях рассказать вам о своем эксперименте. А не сегодня — все. Надеюсь вам пригодится данная форма для отправки файлов. Пока!

Ссылка на основную публикацию
Как отправить бабушку в дом престарелых
Общая ситуация с домами престарелых в России Оформить больного пенсионера в частный дом-интернат выходит достаточно дорого. Даже если владелец не...
Как обжать коннектор rj 45 без обжимки
В этой инструкции я покажу как обжать сетевой кабель LAN и изготовить интернет кабель своими руками без инструмента. Вместо кримпера...
Как обменять клеверсы на деньги
За «Клеверсы» можно не только покупать дополнительные возможности в ежедневной викторине, но приобретать товары и продукты питания. Начисляется валюта за...
Как отправить в вк много фотографий сразу
Сегодня мы расскажем вам как можно перенести фотографии в социльной сети в вконтакте в уже созданный альбом. Вы узнаете как...
Adblock detector