Django框架、模态框中实现图片预览(附关于前端图片预览功能无法实现图片更新问题的解决)
图片预览;预览图片无法更新;input标签无法读取文件;input标签无法读取图片;input标签读取内容为undefined;开发中使用Django框架,进行人员管理系统的制作。在实现人员信息显示及修改功能时使用了模态框功能。现在需要在修改人员信息的模态框中添加图片预览功能。
需求
开发中使用Django框架,进行人员管理系统的制作。在实现人员信息显示及修改功能时使用了模态框功能。
现在需要在修改人员信息的模态框中添加图片预览功能。
实现
关键技术
实现过程中主要使用到两个web API:addEventListener和readAsDataURL
addEventListener
EventTarget.addEventListener() 方法
将指定的监听器注册到 EventTarget 上,
当该对象触发指定的事件时,指定的回调函数就会被执行。
————MDN文档
也就是说呢,这个叫addEventListener的方法会给使用对象添加一个监听器。addEventListener方法共有三个参数,第一个参数可以选择监听的动作,第二个参数可以设置监听到目标动作之后的行为,第三个参数则是指定该监听器是否会被DOM冒泡事件触发。
readAsDataURL
readAsDataURL 方法会读取指定的 Blob 或 File 对象。
读取操作完成的时候,
readyState 会变成已完成DONE,并触发 loadend 事件,
同时 result 属性将包含一个data:
URL 格式的字符串(base64 编码)以表示所读取文件的内容。
————MDN文档
简单来说呢,这个readAsDataURL方法会帮你读取指定的文件,并且在读取完成之后触发loadend事件(我们使用addEventListener监听的目标)。
代码示例
我们找全了工具,便可以进行实际操作了
HTML
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">
JavaScript
function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
报错解决
错误代码
在实现的过程中,我通过Django的{% for %}循环生成了十个模态框,每个模态框都包含一个表单。
对表单添加图片预览功能的代码(错误代码)如下:
function previewFile() {
var preview = document.querySelector('#previewImage{{i.username}}');
var file = document.getElementById("upload{{i.username}}").files[0];
var reader = new FileReader();
reader.addEventListener('loadend', function () {
preview.src = reader.result;
}, false);
// alert(file.src);
// alert(reader.result);
if (file) {
reader.readAsDataURL(file);
}
}
代码实现的结果是只有最后一个模态框能够进行图片更新,其它九个模态框在上传图片之后毫无变化。
在代码中添加:
alert(file);
对file变量进行输出时发现,显示结果为undefined
一开始我以为是html标签的id属性有长度限制,后来经过一天半时间的排错,发现是函数没有调用正确。
我使用了Django的前端脚本功能,对模态框进行循环输出,每一个模态框都调用了 previewFile() 函数,而 previewFile() 函数也被重复生成了十次,相当于是进行了九次的重载。最终结果就是只有最后一个模态框能够实现图片的预览功能。
修改后的代码
function previewFile{{i.username}}(){
var preview = document.querySelector('#previewImage{{i.username}}');
var file = document.getElementById("upload{{i.username}}").files[0];
var reader = new FileReader();
reader.addEventListener('loadend', function () {
preview.src = reader.result;
}, false);
// alert(file.src);
// alert(reader.result);
if (file) {
reader.readAsDataURL(file);
}
}
使用预处理脚本对函数名进行修改之后,图片预览功能成功实现。
ps:用博客记录一下这改了一天半的bug,同时记录我这只小菜鸡的成长历程。
更多推荐
所有评论(0)