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，同时记录我这只小菜鸡的成长历程。