美文网首页
Django 和 Javascript交互传参数

Django 和 Javascript交互传参数

作者: AllenBigBear | 来源:发表于2019-06-18 14:30 被阅读0次

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

如果不用任何渲染,单纯用原生HTML的input标签上传文件,在你选择完文件以后,文件的文件名是可以显示在input框边上的。
但是你如果用了bootstrap渲染后,已选择的文件名无法显示了(虽然实际上他已经被选中了)

1: 功能实现

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

<div class="container">
    <div class="custom-file">
    <form action="{% url 'users:edit_profile' %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="{{profile.avatar.name}}" id={{profile.avatar.id_for_label}} class="custom-file-input" >
        <label class="custom-file-label upload_avatar_label" for={{profile.avatar.id_for_label}}>选择文件</label>
        <div id="showfilename"></div>
        <button id="submit_avatar" class="btn btn-warning" type="submit">提交修改</button>
    </form>
    </div>
</div>

<script type="text/javascript">
    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文件中去

<script src="{% static 'custom_js/edit_profile.js' %}"></script>

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

取不到值

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

在网上搜索了半天之后,没有发现很好的解决办法,有些方法建议通过views函数来做,太懒了没试。
最后找了个看似比较简单的方法,他的原理是在html页面引入外部脚本的上方,先把变量进行定义,这样外联JS中就可以取到值了,来试一下。

<script type="text/javascript">
    var input = document.getElementById('{{profile.avatar.id_for_label}}');
    var infoarea = document.getElementById('showfilename');
</script>
<script src="{% static 'custom_js/edit_profile.js' %}"></script>

来看一下效果


实际效果

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

参考资料:
http://www.hi-roy.com/2016/12/20/%E5%B0%86Django%E6%A8%A1%E6%9D%BF%E5%8F%98%E9%87%8F%E4%BC%A0%E9%80%92%E7%BB%99%E5%A4%96%E9%83%A8JS%E8%B0%83%E7%94%A8%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F/

相关文章

网友评论

      本文标题:Django 和 Javascript交互传参数

      本文链接:https://www.haomeiwen.com/subject/rcrnfctx.html