Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML5 File Api and EXTJS / 13 сообщений из 13, страница 1 из 1
30.08.2012, 17:30:54
    #37937613
Ichisen
Ichisen
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
Привет всем! Вот столкнулся с проблемой, необходимо загружать в приложение на js файл, преобразовывать его в base64 и отправлять его на сервер XMLHttpRequest'ом.

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

Код: 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
| Ответить | Цитировать | Написать  
31.08.2012, 10:17:14
    #37938262
Яростный Меч
Яростный Меч
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
Ichisen,

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

сделал так потому что base64 может сменится на что либо другое, а так то ясно что обрезать первые символы будет куда быстрее чем кодировать всё сообщение целиком.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.08.2012, 12:09:04
    #37938486
Ichisen
Ichisen
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
Собственно, а EXTJS умеет работать с FILE API ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.08.2012, 12:56:49
    #37938643
ShSerge
ShSerge
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
IchisenСобственно, а EXTJS умеет работать с FILE API ?
А яваскрипт умеет? Или его уже отменили?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.09.2012, 11:07:40
    #37939711
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
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
| Ответить | Цитировать | Написать  
01.09.2012, 11:12:52
    #37939712
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
Забыл добавить код my_queryHttp=0; в ветку catch (e) функции f_my_RequestStateChange()
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.09.2012, 11:17:08
    #37939714
asws
asws
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
Еще в теге input можно уточнить виды файлов, пример для изображений: accept="image/jpeg",
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.09.2012, 07:13:32
    #37940746
Ichisen
Ichisen
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
HTML5 File Api and EXTJS
asws,

спасибо конечно, но это я разобрал давно, просто хотел узнать существует ли плагин для extjs который позволяет проделывать подобное но в экстовском стиле...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / HTML5 File Api and EXTJS / 13 сообщений из 13, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 552ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1449393]:
 0ms
get settings:
 9ms
get forum list:
 20ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 217ms
get topic data:
 13ms
get forum data:
 3ms
get page messages:
 61ms
get tp. blocked users:
 2ms
others: 221ms
total:  552ms
x
x
Закрыть


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