Javascript.RU

AJAX отправка файла. Как отправить файл с помощью Ajax? Как отправить файл на javascript?

Как отправить файл на сервер через Ajax?
Как отправить файлы через скрытый фрейм iframe?

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

<form id="test_form" method="post" enctype="multipart/form-data" onSubmit="">
	<input class="file_form" type="file" name="upload_file" />
</form><br />
<div id="result">Тут будет статус загрузки</div><br /><br />
<div onclick="SendFile();">Отправить файл через Ajax</div><br />

Как видите в форме нет кнопки Отправить.
У формы обязательно должен быть id, в нашем случае id="test_form".

Отлично, все готово.
Теперь осталось только отправить файл.

Для отправки файла подключите к своему сайту перед тегом ScriptJava фреймворк, добавив вот такой код:

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Теперь нужно прописать код который будет отправлять файл на сервер через Ajax.

Пишем функцию отправки файла на сервер без перезагрузки страницы:

<script type="text/javascript">
function SendFile() {
	//отправка файла на сервер
	$$f({
		formid:'test_form',//id формы
		url:'ajax.php',//адрес на серверный скрипт который будет принимать файл
		onstart:function () {//действие при начале загрузки файла
			$$('result','начинаю отправку файла');//в элемент с id="result" выводим результат
		},
		onsend:function () {//действие по окончании загрузки файла
			$$('result',$$('result').innerHTML+'<br />файл успешно загружен');//в элемент с id="result" выводим результат
		}
	});
}
</script>

При нажатии на что либо нужно вызвать функцию которая будет отвечать за отправку файла через Ajax:

SendFile();

Как получать ответ от файла ajax.php

Содержимое файла ajax.php

<?php
if($_FILES['upload_file']['size']>0) {
	echo'
		<script type="text/javascript">
		var elm=parent.window.document.getElementById("result");
		elm.innerHTML=elm.innerHTML+"<br />Получен файл '.$_FILES['upload_file']['name'].' размером '.$_FILES['upload_file']['size'].' байт";
		</script>
	';
}
?>

Как видите все очень просто и отправить файл через javascript на сервер можно

+2

Автор: Systemer (не зарегистрирован), дата: 27 ноября, 2011 - 09:30
#permalink

Не работает ответ с сервера. Подозреваю потому что адрес странички с которой отправляется запрос выглядит так .../blog/index.php?action=post

Плиз хелп!


Автор: seoneo, дата: 28 января, 2012 - 12:57
#permalink

Все прекрасно работает.
Один раз глюкануло, но там я перепуталне правильно форму изобразил.
Делал гесту на scriptjava так вообще летает.


Автор: Гость (не зарегистрирован), дата: 15 февраля, 2012 - 18:46
#permalink

Хорошо, инфа о файле выводится. А где сам копируемый файл?)
В папке с кодом пусто, проверил на пару уровней выше - тоже ничего. Куда же он копируется и копируется ли вообще?
"А был ли мальчик?" (с)


Автор: seoneo, дата: 13 апреля, 2012 - 05:39
#permalink

а для этого ты должен после копирования его перенести с помощью php потому как он копируется во временную папку в данном примере и сразу удаляется как заканчивает работу php код
вообще то это считается само собой разумеющимся
и вот тут об этом написано
http://www.php.su/phphttp/?uploads


Автор: Гость (не зарегистрирован), дата: 27 сентября, 2013 - 07:42
#permalink

если не считать того что $_FILES['uploadfile'] на самом деле $_FILES['upload_file'], то весьма полезная статья. Минус пол часа от жизни -_-


Автор: creazy optimizator (не зарегистрирован), дата: 14 июня, 2012 - 16:04
#permalink

Все понятно.. используйте плагин и будет все работать.

А нет описания решения без плагина, из 10-20 строк кода, что бы все равно работало?


Автор: undefms (не зарегистрирован), дата: 18 июня, 2012 - 13:08
#permalink

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

Uncaught TypeError: Cannot set property '$$' of null scriptjava.js:32


Автор: Гость (не зарегистрирован), дата: 7 июля, 2012 - 15:30
#permalink

А можно выложить исходники!


Автор: Oleg Zorin (не зарегистрирован), дата: 9 июля, 2012 - 16:12
#permalink

Добрый день.

Технология AJAX в свое сути достаточно проста - обрабатываем форму, готовим post или get данные и отправляем серверу.

Посмотрев как передаются файлы обычным методом (), то становится ясно, что файл передается file=(содержимое файла), где file - имя .

Вопрос в том, как подготовить post данные для отправки файла на сервер?

В интернете ходит много рецептов - возьмите эту библиотеку, возьмите ту...

На вашем сайте я почерпнул много полезной информации. Подскажите саму суть отправки файлов - как получить содержимое файла для передачи на сервер?


Автор: Гость (не зарегистрирован), дата: 10 сентября, 2012 - 06:40
#permalink

В том то и дело, что никак не получить. Только отправить через форму. Поэтому плагины и нужны: они создают форму и отправляют её в скрытом режиме (через iframe, например)


Автор: Roxci (не зарегистрирован), дата: 26 сентября, 2012 - 15:15
#permalink

А можно ли как-то усовершенствовать плагин, чтобы была возможность с сервера передавать данные на клиент, например о том, что превышен размер файла?


Автор: Гость (не зарегистрирован), дата: 10 октября, 2012 - 11:44
#permalink

а как кроме файла передать еще-какие-нибудь данные?


Автор: Гость (не зарегистрирован), дата: 18 октября, 2012 - 14:24
#permalink

а как прочесть json-ответ в onsend:function ()?


Автор: Гость (не зарегистрирован), дата: 18 октября, 2012 - 17:12
#permalink

вот так я смогла отдать ответ:
response.getWriter().print("parent.aflerLoad('"+jAns+"');");


Автор: Гость (не зарегистрирован), дата: 18 октября, 2012 - 17:13
#permalink

response.getWriter().print("parent.aflerFileLoad('"+jAns+"');");


Автор: Гость (не зарегистрирован), дата: 18 октября, 2012 - 17:14
#permalink
response.getWriter().print("<script type='text/javascript'>parent.aflerFileLoad('"+jAns+"');</script>");

Автор: Гость (не зарегистрирован), дата: 27 октября, 2012 - 00:19
#permalink

спасибо автору


Автор: Гость (не зарегистрирован), дата: 27 октября, 2012 - 01:33
#permalink

как ответ с сервера вставить в div по его id


Автор: Гость (не зарегистрирован), дата: 27 октября, 2012 - 01:59
#permalink

как обработать ответ с сервера???


Автор: Гость (не зарегистрирован), дата: 27 октября, 2012 - 11:32
#permalink

тормоз я, не увидел сначало


Автор: Гость (не зарегистрирован), дата: 27 апреля, 2013 - 18:32
#permalink

А как отправить файл на другой сервер? Например, форма лежит прямо на компьютере, а файл-обработчик php - на site.com?


Автор: Karen82 (не зарегистрирован), дата: 9 февраля, 2014 - 02:37
#permalink

Никак не пойму в чем дело.
Но при загрузке изображений через аджакс функции getimagesize, imagecreatefromjpeg, imagecreatefrompng и imagecreatefromgif не работают, хотя без аджакса все нормально работало.
getimagesize($_FILES['uploadfile']['tmp_name'][$key]) не возвращает данных загруженного изображения.
Помогите если пожалуйста


Автор: Гость (не зарегистрирован), дата: 13 октября, 2014 - 13:59
#permalink

не стоит так делать _$$.$s.randnum(0,1000000);


Автор: Гость (не зарегистрирован), дата: 7 сентября, 2015 - 18:09
#permalink

Добрый день,
как помимо файла передать еще какие-нибудь данные?


Автор: ggyyvv, дата: 2 октября, 2015 - 15:16
#permalink

присоединяюсь к предыдущему коментарию

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


Автор: Гость (не зарегистрирован), дата: 24 апреля, 2016 - 17:53
#permalink

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


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
10 + 6 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
gordon freeman
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum