python之django实现ajax上传图片

最近一个搜索引擎的项目需要用到这个，就是在原有的基础上加一个图片搜索功能，首先得上传图片到服务器！
网上很多类似代码，但是有些许问题，由于对前端和ajax不是太熟悉，所以弄了比较久才搞定这个功能。

一、html代码

上传图片图标代码，用一个label标签将上传文件输入框跟搜索图片绑定一起，
点击图片的时候就相当于点击了上传文件的按钮，把输入文件类型的标签隐藏起来，表单外是一个用来显示上传的图片。

<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">

ajax部分,在body标签里面

<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>

二、django部分

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')

这样就ok了，建议大家最好用ajax异步操作，就普通的表单跳转会些许麻烦。

参考：https://www.cnblogs.com/jiangchunsheng/p/8974732.html