Angular JS上传文件在IE中出现两次

时间:2017-08-09 14:40:21

标签: angularjs internet-explorer

我有一个处理上传文件的指令并将其显示在列表中。为此,我有一个用于打开资源管理器的自定义按钮。用户从资源管理器系统中选择文件后,在列表中显示两次文件名。经过调试后,我意识到它正在调用" onClick"方法两次,一次当用户点击它(duh)时,一些神秘的事件再次调用它。我认为这是范围。$ apply part但不能确定。这是我的代码段:

filename=myfile.txt

while read line
do
   found=$(grep '^[^"]')
   if [ "$found" ]; then          
      #think here must be command "paste"      
   fi   
done < $filename

Angular JS:

<div data-ng-click="addFile($event)">
     <span class="icon-small icon-add"></span> 
</div>

即使是奇怪的scope.addFile = function (event) { if (event.originalEvent == null || !(event.originalEvent instanceof MouseEvent)) { return; } if (!hiddenInputElementNode) { //inject the hidden HtmlInputFile element and bind to the click event hiddenInputElementNode = angular.element( "<input accept='application/pdf,audio/*' type='file' class='hidden' multiple />"); hiddenInputElementNode.insertAfter(event.target); } //bind to the inputElementNode change event hiddenInputElementNode.bind('change', function () { angular.forEach(hiddenInputElementNode[0].files, function (dataFile) { scope.$apply( scope.selectedFiles.push({ name: dataFile.name, data: dataFile })); }); this.value = null; hiddenInputElementNode.unbind('change'); }); $timeout(function () { if (!!hiddenInputElementNode) { hiddenInputElementNode.click(); } }, 0, false); }; 也没有使价值无效!

1 个答案:

答案 0 :(得分:0)

尝试更改此代码的javascript代码:

scope.addFile = function (event) {
    if (event.target.tagName.toUpperCase() === "DIV") {

        if (!hiddenInputElementNode) {
            //inject the hidden HtmlInputFile element and bind to the click event
            hiddenInputElementNode = angular.element(
            "<input accept='application/pdf,audio/*' type='file' class='hidden' multiple />");

            hiddenInputElementNode.insertAfter(event.target);
        }
        //bind to the inputElementNode change event 
        hiddenInputElementNode.bind('change', function () {
            angular.forEach(hiddenInputElementNode[0].files, function (dataFile) {
                scope.$apply(
                        scope.selectedFiles.push({
                            name: dataFile.name,
                            data: dataFile
                        }));
            });
            this.value = null;
            hiddenInputElementNode.unbind('change');
        });

        $timeout(function () {
            if (!!hiddenInputElementNode) {
                hiddenInputElementNode.click();
            }
        }, 0, false);
    }
};

我相信你的ng-click事件由于div内的跨度而被触发两次(我也有类似的IE问题)。