Все, кто пользуется GMail и завсегдатеи Хабрахабра замечали, что приаттаченные файлы потихоньку загружаются на сервер через несколько секунд бездействия и затем поля с именами файлов заменяются на чекбоксы.
Похожий функционал я реализовал в одном Django-проекте с помощью JQuery.
При выборе ползователем логотипа для визитки, файл логотипа прозрачно загружается на сервер, обрабатывается и затем «отдается» браузеру. и пользователь видит, что в макете логотип поменялся на выбранный им.
Реализация
После загрузки страницы запускается периодический вызов функции LoadLogotype()
Функция LoadLogotype() проверяет, выбран или изменился ли файл логотипа и, если это так, то отправляет форму «uploadphoto» на сервер.
Форма имеет параметр target=«upload_frame», то-есть она не будет инициировать переход на другую страницу. Все изменения будут касаться только скрытого фрейма. После отправки формы в этом фрейме загрузиться отданный сервером результат.
Оригинальный пост
Похожий функционал я реализовал в одном Django-проекте с помощью JQuery.
При выборе ползователем логотипа для визитки, файл логотипа прозрачно загружается на сервер, обрабатывается и затем «отдается» браузеру. и пользователь видит, что в макете логотип поменялся на выбранный им.
Реализация
После загрузки страницы запускается периодический вызов функции LoadLogotype()
var previous_logo = "";
//-----------------------------------------------------------------------------
function LoadLogotype() {
var card_logo = $("#card_logo").val();
if ((card_logo != "") && (previous_logo != card_logo)) {
previous_logo = card_logo;
$("#uploadphoto").submit();
}
}
//-----------------------------------------------------------------------------
$(function() {
setInterval(«LoadLogotype()», 1000);
});
Функция LoadLogotype() проверяет, выбран или изменился ли файл логотипа и, если это так, то отправляет форму «uploadphoto» на сервер.
Форма имеет параметр target=«upload_frame», то-есть она не будет инициировать переход на другую страницу. Все изменения будут касаться только скрытого фрейма. После отправки формы в этом фрейме загрузиться отданный сервером результат.
…
form id=«uploadphoto» target=«upload_frame» enctype=«multipart/form-data» action="/upload_logo/" method = «post»>
Логотип: /form>
…
iframe id=«upload_frame» name=«upload_frame» style=«display:none»>
…
Серверная функция обработки загрузки логотипа сохраняет файл в папке пользователя. Также загружаемый файл проверяется по списку allowed_files – защита от загрузки пользователем неразрешенных файлов.
Как результат функция отдает URL к файлу.
#------------------------------------------------------------------------------
def upload_logo(request):
'Handles upload of logo images'
alloved_files = ('.jpg', '.jpeg', '.png', '.gif')
id = request.session['our_id']
path = settings.MEDIA_ROOT + 'uploads/%s/' % id
if not os.path.isdir(path):
try:
os.makedirs(path)
except:
return «Error: could not create directory to upload files!»
for image_file in request.FILES:
filename = request.FILES[image_file]['filename']
name, ext = os.path.splitext(filename)
if ext not in alloved_files:
continue
if filename == '':
continue
content = request.FILES[image_file]['content']
f = open(path + filename, 'wb')
try:
f.write(content)
finally:
f.close()
content = {
«image»: "/appmedia/uploads/%s/%s" % (id, filename),
}
return render_to_response(«done.html», content, context_instance=RequestContext(request))
Результат рендеринга шаблона done.html попадет в невидимый IFRAME «upload_frame». Скрипт находит в родительском документе элемент «card_logotype» и заменяет URL картинки на отданный сервером.
html>
head>
script language=«JavaScript» type=«text/javascript»>
parent.document.getElementById('card_logotype').src="{{image}}"
/script>
/head>
body>
/body>
/html>
В результате пользователь видит изменение логотипа на выбранную картинку. Весь процесс происходит без полного обновления страницы. Изменяется лишь содержимое скрытого фрейма и картинка логотипа.
Посмотреть как это работает, можно здесь: http://bicards.pythondevside.com/
Оригинальный пост