文链接：https://blog.csdn.net/weixin_42971933/article/details/85995869

作者：吕小胖纸

普通的文件上传只能看到它的文件名，而如果要实现选择某一张图片则可以利用html5的FileReader完成

下面是实现步骤：
html:

这里是上传图片的内容，οnchange="getFile()"为选择文件后的转换函数，后面会提及
上传图片的按钮我这里是自定义的，做法在另一篇博客里

css:

预览框我暂定为100x100的正方形框，出来后图片可能会有变形之类的，可以自定义

接下来是主要的JS部分
JS：

1. 首先，定义一个变量showFile保存实际要显示的图片的整个文件
   
2. 获取预览框，方便之后的显示：
   准备工作做完了，现在开始转码
3. 编写一个函数，将图片路径转码
   这样就获取到了转码后的图片文件的src
   （注意：FileReader在IE里是不兼容的，IE 6-9完全不兼容，IE 10-11需要写兼容）
4. 接下来就是转换啦
   这里将选择的文件获取到之后，再赋给全局文件（如果点开了选择框但是没有选择文件即为之前的文件本身），再回调函数里将src赋给预览框
   这一步的完成时间是在file框的onchange中完成的
5. 然后效果就完成啦，看看成果吧
   选择之前：
   因为我没有给img赋src,所以为空白
   选择之后：
   选择图片就可以预览啦，再选择图片一样可以预览

样式简洁，可以自己定义，比如写个+什么的
像这种：

样式就自己定义好了。

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程， 还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

现功能介绍：在使用form表单上传图片时，将上传图片缩略图显示在上传图片控件内的方法

HTML区：

<div class="form-group">
      <label for="avatar">头像<img class="avatar" width="80px" height="80px"
       src="{% static 'image/head/default.png' %}"
                 alt="图片未加载出"></label>
       <input type="file" id="avatar" style="display: none">
</div>


JS代码区

<script>
    {#替换头像位置图片方法#}
    $('#avatar').change(function () {
            {#jquery对象转换为DOM对象#}
            var choose_file = $(this)[0].files[0];
            {#创建一个阅读器对象#}
            var reader = new FileReader();
            {#读取choose_file的文件对象#}
            reader.readAsDataURL(choose_file);
            {#上面代码加载完再运行函数内代码（原因：图片未加载完下面的代码就有可能执行完了）#}
            reader.onload = function () {
                {# 路径的值在reader.result中#}
                $('.avatar').attr("src", reader.result)
            }
        }
    )
</script>

PS:注意务必要引入jQuery样式

最终结果显示

#python##Python入门推荐#