通知AngularJS与Djang上传文件

2024-10-02 02:38:37 发布

您现在位置:Python中文网/ 问答频道 /正文

对于我的网页,服务器端使用Django 1.9,客户端使用AngularJs(验证等)。
同样对于CSS,我使用Bootstrap(和Angular Ui)。你知道吗

现在我在Django中创建了所需的表单,将它们插入到实际页面中。其中,我有一个文件类型的输入字段,允许用户上传一个文件。你知道吗

当用户选择了一个文件后,我想在AngularJs中做一些检查。问题是:我不知道如何从Django获得某种回调,以知道上载文件窗口已关闭。
我当前的解决方案涉及一个普通的javascript函数,它绑定到upload字段并调用AngularJs函数,但这不能正常工作。你知道吗

所以在我的表单.py看起来是这样的:

class UploadForm(forms.Form):
    fa_file = forms.FileField(label='Select a Fasta file',
                               widget=forms.TextInput(attrs={'type': 'file'})

html页面中插入此字段的部分如下所示:

<div class="panel-body">
    <input type="text" id="uploadFile" placeholder="Choose File" disabled="disabled"/>
    <div class="file-upload btn btn-sm btn-primary">
        <span>Upload</span>
        {{ form.fa_file }}
    </div>
</div>

绑定到文件上载字段的javascript函数是:

<script>
    document.getElementById("id_fa_file").onchange = function () {
        document.getElementById("uploadFile").value = this.value;
        angular.element(this).scope().changeFaFileValue(this.value);
    };
</script>

每当用户完成选择文件时,就会执行此on change方法。本质上这就是我想要实现的行为,我的控制器'changeFaFileValue'的AngularJS函数也会执行。
但执行似乎是在自己的范围内进行的。我可以说,因为我的AngularJS控制器中有一个观察程序,用于在“changeFaFileValue”中更改的变量,当通过这个普通的Javascript on change函数调用函数时,不会触发这个观察程序。 但是,如果我从控制器中的某个地方调用'changeFaFileValue',观察程序将按预期执行。你知道吗

控制器中的方法如下所示:

$scope.$watch('allow_submit', function(){
   console.log("IT WORKED.");
});

$scope.changeFaFileValue = function(newPath){
    $scope.fa_file_js = newPath;
    $scope.allow_submit = !$scope.allow_submit;
}

我想我错过了一些重要的事情。
你能告诉我怎样才能达到你想要的行为吗?我的方法正确吗?你知道吗


Tags: 文件django函数用户divfunctionforms控制器

热门问题