La pitón Django lograr ajax subir fotos

A los últimos motores de búsqueda necesitan utilizar este proyecto, es añadir en una base de la original búsqueda de imágenes función, primero debe subir imágenes al servidor!
En línea una gran cantidad de código similar, pero un pequeño problema, debido a la front-end y Ajax no demasiado familiarizados, a fin de obtener un tiempo relativamente largo para conseguir esta función.

A, códigos html

Subir icono de la imagen de código de etiqueta con un cuadro de entrada de etiqueta para subir archivos con fotos buscar unidos,
haga clic en la imagen cuando el equivalente a hacer clic en el botón para subir el archivo, los tipos de archivo de entrada de etiquetas ocultas, es una forma exterior utilizado mostrar imágenes subidas.

<form >
    {% csrf_token %}
    <label>
        <img id="image_upload" class="searchUploadImage" src="/static/images/uploadImage.png" width="48" height="48" title="图片智能搜索">
        <input id="image-input" hidden type="file" name="image">
    </label>
</form>
<img id="image-img" src="/static/images/test.png" width="224" height="225">

porción ajax dentro del cuerpo de la etiqueta

<script>
            // 上传文件按钮（label里的图片）点击事件
        $('#image-input').on('change',function () {
            {#alert('hello');#}
            upload();
            // 获取用户最后一次选择的图片
            var choose_file = $(this)[0].files[0];
            // 创建一个新的FileReader对象，用来读取文件信息
            var reader = new FileReader();
            // 读取用户上传的图片的路径
            reader.readAsDataURL(choose_file);
            // 读取完毕之后，将图片的src属性修改成用户上传的图片的本地路径

            reader.onload = function () {
                 $("#image-img").attr("src", reader.result)
            };

        });
        function upload() {
            var formdata = new FormData();
            formdata.append("image", $("#image-input")[0].files[0]);
            formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
            $.ajax({
                processData:false,
                contentType:false,
                url:'/upload/',
                type:'post',
                data:formdata,
                dataType:"json",
                success:function (arg) {
                    if (arg.state == 1){
                        alert('上传成功！')
                    }else {
                        alert('上传失败！')
                    }
                },error: function () {
                    alert("访问繁忙，请重试")
                }

            })
        }

    </script>

Dos, Django parte

urls.py

from django.urls import path, re_path
from search.views import upload

path('upload/', upload, name="upload"),

views.py

def upload(request):
    if request.method == 'POST':
        image = request.FILES.get('image')

        with open('search/utils/images/' + image.name, 'wb') as f:
            for line in image:
                f.write(line)
        print('------image=', image.name, '------------')

        try:
            data = {'state': 1}
        except:
            data = {'state': 0}

        return JsonResponse(data)

    return render(request, 'index.html')

Así bien, le sugiero que utilice un funcionamiento asíncrono ajax, saltará un pequeño problema en la forma ordinaria.

Referencia: https: //www.cnblogs.com/jiangchunsheng/p/8974732.html