Django form图片文件上传

表单文件上传

用户信息表的图像存储字段,数据库只存路径

# 上传到media下面的/avatars/
avatar = models.FileField(upload_to="avatars/", default="avatars/default.png", verbose_name="头像")

settings设置文件上传位置，数据库只存路径

# Django用户上传的都叫media文件
MEDIA_URL = "/media/"
# media配置，用户上传的文件都默认放在这个文件夹下
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

HTML文件

form标签必须加上enctype="multipart/form-data"
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
	<div class="form-group">
	<label>头像</label>
	<div>
		<label><img id="avatar-img" src="/static/img/default.png" alt=""></label>
		<input accept="image/*" type="file" name="avatar" id="avatar-img" style="display: none">
	</div>

views接收文件

form_obj = forms.RegForm(request.POST)
# form帮我做校验
if form_obj.is_valid():
	# 校验通过，去除重复数据
	form_obj.cleaned_data.pop("re_password")
	#得到文件对象
	avatar_img = request.FILES.get("avatar")
	#数据库存储新数据
	models.UserInfo.objects.create_user(**form_obj.cleaned_data, avatar=avatar_img)

JS显示选择图片

<script>
    // 找到头像的input标签绑定change事件
    $("#id_avatar").change(function () {
        // 1. 创建一个读取文件的对象
        var fileReader = new FileReader();
        // 取到当前选中的头像文件对象
        // console.log(this.files[0]);
        // 读取你选中的那个文件
        fileReader.readAsDataURL(this.files[0]);  // 读取文件是需要时间的
        fileReader.onload = function () {
            // 2. 等上一步读完文件之后才把图片加载到img标签中
            $("#avatar-img").attr("src", fileReader.result);
        };
    });
</script>