Django框架下如何实现图片上传前的本地预览功能

无需调整现有模型、form.py代码，仅修改前端HTML模板即可完成功能，操作步骤如下： #

1. 新增预览图展示容器 #

在你现有的HTML代码中，文件选择框{{ form.image }}的下方，添加预览用的img标签，示例如下：

<div class="fieldWrapper">
    {{ form.image.errors }}
    <br>
    <label for="{{ form.image.id_for_label }}"><br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;Image: &nbsp;</label>
    {{ form.image }}
    <!-- 新增预览图标签，默认隐藏，选中图片后显示 -->
    <img id="imagePreview" src="" alt="图片预览" style="max-width: 300px; margin: 10px 0 0 8em; display: none;">
</div>

你可以自行调整style属性里的宽高、边距等样式参数，匹配你的页面设计。 #

2. 添加文件选择监听JS代码 #

在form标签结束后，添加如下JS代码，实现选中图片后自动加载预览：

<script>
// 获取文件选择框和预览图元素
const imageInput = document.querySelector('input[type="file"][name="image"]');
const previewImg = document.getElementById('imagePreview');

// 监听文件选择变化
imageInput.addEventListener('change', function() {
    const file = this.files[0];
    if (file) {
        // 读取本地文件生成临时预览地址
        const reader = new FileReader();
        reader.onload = function(e) {
            previewImg.src = e.target.result;
            previewImg.style.display = 'block';
        }
        reader.readAsDataURL(file);
    } else {
        // 未选择文件时隐藏预览
        previewImg.style.display = 'none';
        previewImg.src = '';
    }
});
</script>

上述功能完全由前端实现，不需要向后端发送请求，选中图片后即可即时在页面看到预览效果，不影响原有的上传提交逻辑。

内容的提问来源于stack exchange，提问作者newbieperson