powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML5 File Api and EXTJS
13 сообщений из 13, страница 1 из 1
HTML5 File Api and EXTJS
    #37937613
Ichisen
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Привет всем! Вот столкнулся с проблемой, необходимо загружать в приложение на js файл, преобразовывать его в base64 и отправлять его на сервер XMLHttpRequest'ом.

Собственно что интересно... Как можно файл превратность в текст закодированы в base64, без сторонних библиотек преобразовывающих str в base64?
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37937639
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
IchisenКак можно файл превратность в текст закодированы в base64, без сторонних библиотек преобразовывающих str в base64?как ни странно, в несколько строк кода
http://javascript.ru/blog/Brmaley-ee/FileAPI
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37937641
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
да, в IE работает только с 10 версии.
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37937652
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
кстати, у XMLHttpRequest'а появилось поле upload, и необязательно прочитывать файл, можно отправить как есть.
Ну или с помощью упомянутой по ссылке FormData.
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37938133
Ichisen
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Сделал всё по колхозному...

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
var handleFileSelect = function(evt)
{
     var file = evt.target.files.item(0),  reader = new FileReader()

     reader.onload = function (e) 
     {
            send( Base64.encode(e.target.result) )
     }
     reader.onprogress = function(evt) 
     {
            console.log((evt.loaded / evt.total)*100)
     }

     reader.readAsBinaryString(file)
}

inputFile.addEventListener('change', handleFileSelect, false)
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37938262
Фотография Яростный Меч
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ichisen,

не проще ли было вместо readAsBinaryString использовать readAsDataURL и потом просто отрезать первые несколько символов?
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37938326
Ichisen
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Яростный Меч,

сделал так потому что base64 может сменится на что либо другое, а так то ясно что обрезать первые символы будет куда быстрее чем кодировать всё сообщение целиком.
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37938486
Ichisen
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
Собственно, а EXTJS умеет работать с FILE API ?
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37938643
ShSerge
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
IchisenСобственно, а EXTJS умеет работать с FILE API ?
А яваскрипт умеет? Или его уже отменили?
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37939711
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Ichisen... необходимо загружать в приложение на js файл, преобразовывать его в base64 и отправлять его на сервер XMLHttpRequest'ом.
...
Как можно файл превратность в текст закодированы в base64, без сторонних библиотек преобразовывающих str в base64?
Вот полноценный пример на нативном JS - ложи на сервер (реальный, локально вряд-ли заработает) и запускай.
ИЕ не умеет;
Сафари не создает новый объект new FileReader() , пишет : ReferenceError: Can't find variable: FileReader
( у меня версия Сафари 5.1 (7534.50) ), но в Сафари регулярно разные проблемы, пока не обновят версию.

Файл имеет имя my_pattern.php ( первый параметр функции f_postHttp() - '/my_pattern.php' )
Код: 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.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
<?php
if (!empty($_POST['mode']) && !empty($_POST['my_file'])) {
$my_mode=(int)$_POST['mode']; if ($my_mode!=1) { print 'error'; exit; }
$my_file=base64_decode(stripslashes($_POST['my_file']));
print 'ok'; exit;
}
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
var my_reader=null, my_interval=null, my_queryHttp=0, my_HTTP=f_createXmlHttp(); // именно так - глобальная область видимости, чтобы лишних "замыканий" небыло.

function f_upload() {
	var min=1000, max=2000000, p=document.getElementById("my_id_file").files;
	if (!p) { alert('Смените браузер на более новую версию, или на современный.'); return false; }
	p=p[0]; if (!p || !p.name) { alert('Укажите (выберите) файл'); return false; }
	if (p.size<min || p.size>max) { alert('размер файла вне допустимых размеров'); return false; }
	my_reader = new FileReader();
	my_reader.readAsDataURL(p); // содержимое любого файла в base64 - кодировке
	my_reader.onloadend=function(){
		f_postHttp('/my_pattern.php',['mode',1,'my_file',my_reader.result]);
		my_interval=setInterval(function(){f_my_RequestStateChange();},100);
	}
}

function f_my_RequestStateChange() {
	// здесь все небходимое для принятия ответа сервера
	var ret,st;
	try {
		if (my_HTTP.readyState==4)
		{
			st=my_HTTP.status;
			if (st==200)
			{
				ret=my_HTTP.responseText;
				if (ret=='ok') { alert("файл загружен"); }
				if (ret=='error') { alert("Ошибка ответа сервера"); }
			} else alert('Ошибка связи. status:'+st.toString());
			my_queryHttp=0; my_reader=null; if (my_interval) clearInterval(my_interval); my_interval=null;
		}
	}  catch (e) { my_reader=null; if (my_interval) clearInterval(my_interval); my_interval=null; alert('Ошибка приема ответа'); }
}

function f_createXmlHttp() {
	var i,v,x,a='MSXML2.',b='XMLHTTP';
	try	{ x=new XMLHttpRequest(); }
	catch (e)
	{
		v=new Array(a+b+'.6.0',a+b+'.5.0',a+b+'.4.0',a+b+'.3.0',a+b,'Microsoft.'+b); a=v.length;
		for (i=0; i<a && !x; i++) { try { x=new ActiveXObject(v[i]); } catch (e) {} }
	}
	return (!x)?false:x;
}

// POST - запрос на сервер
// name (nm) :		имя скрипта сервера
// params (pr) :	"Массив" строк : имя1, значение1, имя2, значение2, и т.д.
function f_postHttp(nm,pr)
{
	var i,p='',n=null,r,b,rn;
	nm = nm || n; pr = pr || n;
	if	(my_HTTP && my_queryHttp==0 && nm!=n && pr!=n)
		{
			try
				{
					my_queryHttp=1;
					my_HTTP.open('POST',nm,true);
					my_HTTP.onreadystatechange=n;
					r=Math.round(Math.random()*8000000); b=r.toString();
					my_HTTP.setRequestHeader('Content-Type', 'multipart/form-data; boundary='+b);
					r='--'+b+'\r\n'+'Content-Disposition: form-data; name="'; rn='"\r\n\r\n';
					for (i=0; i<pr.length; i+=2)
						{
							p+=r+pr[i]+rn+pr[i+1]+'\r\n';
						}
					p+='--'+b+'--\r\n';
					p='Content-Length: '+p.length+rn+p;
					my_HTTP.send(p);
					return true;
				}
			catch (e) { my_queryHttp=0; alert('Ошибка. Не удалось отправить POST-запрос.'); return false; }
		} else return false;
}
</script>
</head>

<body>
<input id="my_id_file" type="file" /><br>
<input id="my_send" type="button" value="upload file" onclick="if (my_reader==null && my_interval==null) f_upload()" />
</body>
</html>
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37939712
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Забыл добавить код my_queryHttp=0; в ветку catch (e) функции f_my_RequestStateChange()
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37939714
Фотография asws
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Еще в теге input можно уточнить виды файлов, пример для изображений: accept="image/jpeg",
...
Рейтинг: 0 / 0
HTML5 File Api and EXTJS
    #37940746
Ichisen
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Гость
asws,

спасибо конечно, но это я разобрал давно, просто хотел узнать существует ли плагин для extjs который позволяет проделывать подобное но в экстовском стиле...
...
Рейтинг: 0 / 0
13 сообщений из 13, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML5 File Api and EXTJS
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]