Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.09.2008, 15:51
Новичок на форуме
Отправить личное сообщение для Kabuto Посмотреть профиль Найти все сообщения от Kabuto
 
Регистрация: 21.09.2008
Сообщений: 4

доступ к загружаемому файлу из JavaScript
Здраствуйте. Вот только начинаю учить JS.
Решил сделать наконец удобный загрузчик фоторграфий. Столкнулся с проблемой, что при ресайзе и создании thumbnails для 120 загруженных только что картинок сервер упорно матерится и отлынивает от работы.
Решил отдать обработку фото JS, еще до отправки фотографиий, но теперь не знаю как это сделать.
Вопрос: Как можно из JS получить доступ к еще не загруженному(но с уже выбранным путем загрузки) файлу\картинке? Возможно ли вообще реализовать вариант описанный выше?
Ответить с цитированием
  #2 (permalink)  
Старый 21.09.2008, 16:37
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

На клиенте сделать такое силами JS не получится.
Ответить с цитированием
  #3 (permalink)  
Старый 21.09.2008, 17:51
Новичок на форуме
Отправить личное сообщение для Kabuto Посмотреть профиль Найти все сообщения от Kabuto
 
Регистрация: 21.09.2008
Сообщений: 4

Допустим есть поле ввода типа:
<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 сможет ей оперировать (Обрезать, уменьшить, и.т.д.).
Неужели никак нельзя получить доступ к той самой строке, где указан путь к файлу?
Ответить с цитированием
  #4 (permalink)  
Старый 21.09.2008, 18:20
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

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.

Последний раз редактировалось Андрей Параничев, 21.09.2008 в 18:22.
Ответить с цитированием
  #5 (permalink)  
Старый 21.09.2008, 23:17
Новичок на форуме
Отправить личное сообщение для Kabuto Посмотреть профиль Найти все сообщения от Kabuto
 
Регистрация: 21.09.2008
Сообщений: 4

Андрей Параничев,
Спасибо за подробный ответ. Буду пробовать. Если что-нибудь из моей идеи выйдет, обязательно отпишусь.
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2008, 22:36
Интересующийся
Отправить личное сообщение для Олег Посмотреть профиль Найти все сообщения от Олег
 
Регистрация: 13.09.2008
Сообщений: 23

Вконтакте в том же сделали предварительное уменьшение картинок. Но, на яваскрипт такое врядли напишешь, разрешения безопасности не дадут скорее всего. Там люди просто-напросто ява-апплет в страницу встроили
Ответить с цитированием
  #7 (permalink)  
Старый 24.09.2008, 22:49
Новичок на форуме
Отправить личное сообщение для Kabuto Посмотреть профиль Найти все сообщения от Kabuto
 
Регистрация: 21.09.2008
Сообщений: 4

Олег,
Да они используют Aurigma Image Uploader (жалко он платный).
Ну а так все решилось серверной оптимизацией.
Ответить с цитированием
  #8 (permalink)  
Старый 01.08.2014, 06:10
Аватар для Finesse
Интересующийся
Отправить личное сообщение для Finesse Посмотреть профиль Найти все сообщения от Finesse
 
Регистрация: 19.01.2011
Сообщений: 18

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

Последний раз редактировалось Finesse, 01.08.2014 в 06:14.
Ответить с цитированием
  #9 (permalink)  
Старый 01.08.2014, 09:42
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,062

можно просто перетащить картинку с компьютера на эту картинку<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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Лучшая книга по JavaScript Systemnik Оффтопик 27 26.08.2012 15:54
Современная книга по JavaScript twolf Оффтопик 18 21.02.2009 00:20
Непонятное поведение javascript Autosof Общие вопросы Javascript 4 04.09.2008 18:00
Обращение к именам, полученным через Javascript baal1988 Events/DOM/Window 1 31.08.2008 14:08
Нужен Старший разработчик JavaScript Yandex Работа 17 19.08.2008 15:43