Можно ли загрузить изображение и использовать его, без перезагрузки страницы?

Question

[ellz]

Можно ли загрузить изображение и продолжить работать с ним, без перезагрузки страницы?
views.py:

def uploadImage(request):
	if request.method == 'POST':		
		uploaded_file = request.FILES['photo']		
		print(uploaded_file.name)
		print(str(uploaded_file.size) + ' bytes')
	return HttpResponse('test')#пробовал убрать, но получаю ошибку - "ValueError at /upload/"

urls.py:

url(r'upload/', app.views.uploadImage, name='uploadImage'),

форма загрузки:

<form method="post" id="loadImageForm" name="loadImageForm" enctype="multipart/form-data" action="{%url 'uploadImage'%}">
		{% csrf_token %}
		<input type='file' id="file" name='photo' accept="image/jpeg,image/png"/>
	</form>

Comments

[Сергей Горностаев]

Можно. Читать про AJAX.

[ellz]

Сергей Горностаев, а потом обратно загрузить на html шаблон можно без перезагрузки, если AJAX использовать?

[Сергей Горностаев]

ellz, AJAX - это способ отправлять запросы и получать ответы.

[ellz]

Сергей Горностаев, спасибо.

[ellz]

Сергей Горностаев, сделал так:
views.py:

def uploadImage(request):
	if request.method == 'POST':		
		form = forms.FileUploadForm(data=request.POST, files=request.FILES)
		if form.is_valid():	
			print(type(request.FILES['FILE']))
		else:
			print(form.errors)
	return HttpResponse('test')

index.js:

$('#file').change(function () {
        var formdata = new FormData($(this)[0]);
        if (formdata) {
            formdata.append("image", file);
            $.ajax({
                url: "uploadImage",
                type: "POST",
                data: formdata,
                headers: { "X-CSRFToken": getCookie("csrftoken") },
                processData: false,
                contentType: false,
                success: function () {
                    console.log('soccess');
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    });

    function getCookie(c_name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if (c_end == -1) c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start, c_end));
            }
        }
        return "";
    }

forms.py:

class FileUploadForm(forms.Form):
    file_source = forms.FileField()

print(form.errors) - выводит file_source This field is required. Поле file_source - обязательно? Вроде по гайду делаю все. Не знаете в чем проблема?

[alternativshik]

ellz, у вас в html-форме name='photo' а в FileUploadForm file_source, естественно, что file_source вы не передаете и оно ругается

[ellz]

alternativshik, не помогло

[alternativshik]

ellz, а тут вообще formdata.append("image", file);
Вы там разберитесь в этой каше для начала. Там одно, там другое, там третье.

Answer 1

[ellz]

Реализовал это так:
index.js:

$(document).ready(function () {
    $('#file').change(function () {
        //var formdata = new FormData($('#loadImageForm')[0]);
        var fileInput = document.getElementById('file');
        var file = fileInput.files[0];
        var formData = new FormData();
        formData.append('photo', file);
        if (formData) {
            $.ajax({                
                url: "uploadImage",
                type: "POST",
                data: formData,
                headers: { "X-CSRFToken": getCookie("csrftoken") },
                processData: false,
                contentType: false,
                success: function () {
                    console.log('success');
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    });

    function getCookie(c_name) {
        if (document.cookie.length > 0) {
            c_start = document.cookie.indexOf(c_name + "=");
            if (c_start != -1) {
                c_start = c_start + c_name.length + 1;
                c_end = document.cookie.indexOf(";", c_start);
                if (c_end == -1) c_end = document.cookie.length;
                return unescape(document.cookie.substring(c_start, c_end));
            }
        }
        return "";
    }
});

views.py:

def uploadImage(request):
	if request.method == 'POST':		
		form = forms.FileUploadForm(data=request.POST, files=request.FILES)
		if form.is_valid():	
			print('Done')
		else:
			print(form.errors)
	return HttpResponse('test')

Благодаря alternativshik и Сергей Горностаев