доступ к загружаемому файлу из JavaScript
Здраствуйте. Вот только начинаю учить JS.
Решил сделать наконец удобный загрузчик фоторграфий. Столкнулся с проблемой, что при ресайзе и создании thumbnails для 120 загруженных только что картинок сервер упорно матерится и отлынивает от работы. Решил отдать обработку фото JS, еще до отправки фотографиий, но теперь не знаю как это сделать. Вопрос: Как можно из JS получить доступ к еще не загруженному(но с уже выбранным путем загрузки) файлу\картинке? Возможно ли вообще реализовать вариант описанный выше? |
На клиенте сделать такое силами JS не получится.
|
Допустим есть поле ввода типа:
<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. |
Андрей Параничев,
Спасибо за подробный ответ. Буду пробовать. Если что-нибудь из моей идеи выйдет, обязательно отпишусь. |
Вконтакте в том же сделали предварительное уменьшение картинок. Но, на яваскрипт такое врядли напишешь, разрешения безопасности не дадут скорее всего. Там люди просто-напросто ява-апплет в страницу встроили
|
Олег,
Да они используют Aurigma Image Uploader (жалко он платный). Ну а так все решилось серверной оптимизацией. |
Цитата:
|
можно просто перетащить картинку с компьютера на эту картинку<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>
|
| Часовой пояс GMT +3, время: 04:34. |