Question

我有一段代码可以在我的HTML文档顶部的脚本标记中正常运行，但是一旦我将其移动到我的角度控制器中，它就会停止工作。有没有人看到这里的代码有什么问题？我收到了encodeImageFileAsURL未定义的错误

<script type='text/javascript'>
function encodeImageFileAsURL() {
  let filesSelected = document.getElementById("inputFileToLoad").files;
  if (filesSelected.length > 0) {
    let fileToLoad = filesSelected[0];

    let fileReader = new FileReader();

    fileReader.onload = function(fileLoadedEvent) {
    let srcData = fileLoadedEvent.target.result; // <--- data: base64

    let newImage = document.createElement('img');
    newImage.src = srcData;

    document.getElementById("imgTest").innerHTML = newImage.outerHTML;
  }
  fileReader.readAsDataURL(fileToLoad);
 }
}

VS这个：

$scope.encodeImageFileAsURL = function () {
let filesSelected = document.getElementById('inputFileToLoad').files;
if (filesSelected.length > 0) {
  let fileToLoad = filesSelected[0];
  let fileReader = new FileReader();

  fileReader.onload = function (fileLoadedEvent) {
    let srcData = fileLoadedEvent.target.result;
    let newImage = document.createElement('img');
    newImage.src = srcData;

    document.getElementById('imgTest').innerHTML = newImage.outerHTML;
  };
  fileReader.readAsDataURL(fileToLoad);
}
};

Answer 1

jsfiddle链接：http://jsfiddle.net/5DMjt/11541/

您可以像这样更新html

<input id="inputFileToLoad" type="file" ng-model="fileToLoad" onchange="angular.element(this).scope().select(this)">

你的功能就像这样

$scope.encodeImageFileAsURL = function(e){
    $scope.currentFile = e.files[0];
    var reader = new FileReader();


            reader.onload = function(event) {

              let srcData = event.target.result
                let newImage = document.createElement('img');
    newImage.src = srcData;

    document.getElementById('imgTest').innerHTML = newImage.outerHTML;

            }

                    reader.readAsDataURL(e.files[0]);
                    //reader.readAsDataURL(element.files[0]);
  //console.log($scope.file)
  //var reader = new FileReader();

  }

脚本标签与控制器

1 个答案: