Question

我正在尝试创建文件上传组件，并在处理之前在浏览器的textarea中显示文本文件内容以进行编辑。

我的输入看起来像这样

<input type="file" process-file/>
<textarea id="file-text"
     ng-model="fileContent">
</textarea>

我有一个正确读取文件内容的指令

app.directive('processFile', [function () {
    return {
        link: function (scope, element, attrs) {
            element.on('change', function  (evt) {
                var files = evt.target.files;

                var reader = new FileReader();
                reader.onload = function(e) {
                    var text = e.target.result
                    console.log(text); // contents are correctly displayed
                    scope.fileContent = text;  // this does not work
                    $scope.fileContent = text; // nor does this
                    $("#file-text").text(text) // or this
                };

                reader.readAsText(files[0]);
            });
        }
    }
}]);

我需要将文件内容注入该textarea，但所有尝试似乎都失败了。我怎么能这样做？

Answer 1

自定义事件被视为事件耗尽角度上下文。在发射这样的事件之后，角度消化循环系统没有被暗示以更新其绑定。您必须手动启动摘要周期以同步绑定。您可以在此处使用$timeout来运行摘要周期。

<强>代码

element.on('change', function  (evt) {
    var files = evt.target.files;
    var reader = new FileReader();
    reader.onload = function(e) {
        var text = e.target.result
        console.log(text); // contents are correctly displayed
        $timeout(function(){
            scope.fileContent = text;
        },0);
    };

    reader.readAsText(files[0]);
});

Answer 2

这是你改变textarea值的方法：

document.getElementById('myTextarea').value = '';

或者在jQuery中这样：

$('#myTextarea').val('');

你在哪里

<textarea id="myTextarea" name="something">This text gets removed</textarea>

How to change the Content of a <textarea> with Javascript

所以你的onload函数应该有这个：

$("#file-text").val(text);

或者在你的html文件中：

<textarea id="file-text">
    {{fileContent}}
</textarea>

如何在textarea中显示文本文件内容？

2 个答案: