关乎form表单中上传图片控件使用技巧

实现功能介绍：在使用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样式

 

最终结果显示

 

 

转载于:https://www.cnblogs.com/L5251/articles/8849873.html