django html超链接传参数,Django 和 Javascript交互传参数

最近在优化网站的页面，在用Bootstrap框架渲染用户上传头像的页面时候，遇到了一个问题

如果不用任何渲染，单纯用原生HTML的input标签上传文件，在你选择完文件以后，文件的文件名是可以显示在input框边上的。

但是你如果用了bootstrap渲染后，已选择的文件名无法显示了(虽然实际上他已经被选中了)

1: 功能实现

然后查阅了资料以后，决定在html页面写一段script，功能得以实现

{% csrf_token %}

选择文件

提交修改

var input = document.getElementById('{{profile.avatar.id_for_label | safe}}');

var infoarea = document.getElementById('showfilename');

input.addEventListener('change',showFileName);

function showFileName(event){

var input = event.srcElement;

var fileName = input.files[0].name;

infoarea.textContent = 'Filename'+fileName;

}

可以显示文件内容

2：但是这已经算一个非常简单的功能实现了，还是在HTML页面写了一大坨

所以我想把script移步到外联的js文件中去

但是在把代码搬到外部JS的过程中，发现了一个问题，Django的模板变量无法在js中被应用，传过去以后相当于只是普通字符串，这个导致了一个严重的问题，getElementById取不到值了,如下图,我在代码里加入了alert进行测试

取不到值

3: 最简单但不是很完美的解决方案

在网上搜索了半天之后，没有发现很好的解决办法，有些方法建议通过views函数来做，太懒了没试。

最后找了个看似比较简单的方法，他的原理是在html页面引入外部脚本的上方，先把变量进行定义，这样外联JS中就可以取到值了，来试一下。

var input = document.getElementById('{{profile.avatar.id_for_label}}');

var infoarea = document.getElementById('showfilename');

来看一下效果

实际效果

总结：

看了下其他文章，应该还有更加好的方法，回头再研究了，先实现功能再说