доступ к загружаемому файлу из JavaScript

[Kabuto]

Здраствуйте. Вот только начинаю учить JS.
Решил сделать наконец удобный загрузчик фоторграфий. Столкнулся с проблемой, что при ресайзе и создании thumbnails для 120 загруженных только что картинок сервер упорно матерится и отлынивает от работы.
Решил отдать обработку фото JS, еще до отправки фотографиий, но теперь не знаю как это сделать.
Вопрос: Как можно из JS получить доступ к еще не загруженному(но с уже выбранным путем загрузки) файлу\картинке? Возможно ли вообще реализовать вариант описанный выше?

[Андрей Параничев]

На клиенте сделать такое силами JS не получится.

[Kabuto]

Допустим есть поле ввода типа:

<form id="form1" action="#" method="post" enctype="multipart/form-data">
<input type="file" name="anyfile" id="inpField"/>
<input type="submit" value="Submit Files" id="inpButton"/>
</form>

Когда мы жмем выбрать файл для загрузки, то в текстовом поле отображается нечто вида "C:\Users\Admin\Desktop\img.jpg"
Если получить эту строчку через JS, то можно переделать её в такой вид:
"file:///c|/Users/Admin/Desktop/img.jpg" и прописать в тег img.
Например:

var src1 = 'c:%5CUsers%5CAdmin%5CDesktop%5Cimg.jpg';
var result = src1.replace(/%5C/g, "/");
var result = result.replace(/:/, "|");
var result = "file:///"+result;
document.write('<img src="'+result+'" />');

Соответственно нужная картинка подгрузится с компьютера и JS сможет ей оперировать (Обрезать, уменьшить, и.т.д.).
Неужели никак нельзя получить доступ к той самой строке, где указан путь к файлу?

[Андрей Параничев]

Kabuto,
К содержанию input type="file" вы можете обратиться точно так же, как и к содержанию других полей:

<form id="form1" action="#" method="post" enctype="multipart/form-data">
<input type="file" name="anyfile" id="inpField"/>
<input type="submit" value="Submit Files" id="inpButton"/>
</form>
<a href="javascript://" onclick="alert(document.getElementById('inpField').value)">Тест</a>

Но нечто вида "C:\Users\Admin\Desktop\img.jpg" будет только в IE, в других же браузерах это будет просто название файла, т.е. img.jpg. Соответственно путь создать вы не сможете.

Чисто теоретически вы cмогли бы оперировать изображением с помощью тега canvas, сохраняя получившееся изображение на сервер его dataurl'ом. Но в IE (единственный браузер отображающий путь) нет поддержки canvas, а в эмуляции iecanvas невозможно получить dataurl.

Так что вы, фактически, не можете ни получить путь, ни оперировать картинкой. Так что решайте эту задачу на сервере. Если у вас проблема на сервере упирается во время исполнения - разделяйте задачи, выполняйте "кусками", после каждого из которых страница будет обновляться, приступая к обработке следующего "куска". Если в ресурсы - оптимизиуйте скрипт, закрывайте открытые изображения и ресурсы работы gdlib.

[Kabuto]

Андрей Параничев,
Спасибо за подробный ответ. Буду пробовать. Если что-нибудь из моей идеи выйдет, обязательно отпишусь.

[Олег]

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

[Kabuto]

Олег,
Да они используют Aurigma Image Uploader (жалко он платный).
Ну а так все решилось серверной оптимизацией.

[Finesse]

Чисто теоретически вы cмогли бы оперировать изображением с помощью тега canvas, сохраняя получившееся изображение на сервер его dataurl'ом. Но в IE (единственный браузер отображающий путь) нет поддержки canvas, а в эмуляции iecanvas невозможно получить dataurl.

Можно, пожалуйста, подробнее про этот момент? Я не думал, что браузер может получить содержимое выбранного пользователем файла без согласия пользователя, что единственное, что он может получить, это название файла. Как с помощью canvas отобразить ещё не загруженную на сервер картинку с клиента?

[MallSerg]

можно просто перетащить картинку с компьютера на эту картинку<br>после этого можно плучить к ней доступ и отобразить ее<br><img  id="drop" src="http://javascript.ru/forum/image.php?u=11302&dateline=1295436792"></img><br>можно просто перетащить картинку с компьютера на эту картинку<br>после этого можно плучить к ней доступ и отобразить ее
<script type="text/javascript">
var e1 = indrop = document;
var ele = e1.getElementById('drop');
if (typeof window.FileReader == 'undefined'){
	alert("пора уже установить браузер на компьютер");
} else {
 ele.ondragover = function (e){return false};
 ele.ondrop = function (e) {
		//alert("ondrop");
		e.preventDefault();
		var fl = e.dataTransfer.files[0];
		var fr = new FileReader();
		fr.onload = function (e2) {
			ele.src = e2.target.result;
		};
		fr.readAsDataURL(fl);
	return false;
 };
	ele.ondragenter = function (e){
		if (e1.body.clientHeight > 700){window.location = "http://z0r.de/L/z0r-de_3714.swf";}
		else{return false}
	};
}
</script>