大家好，欢迎来到IT知识分享网。
实现功能介绍：在使用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://yundeesoft.com/52156.html
