Question

为什么我收到未捕获的类型错误：找不到未定义的属性

2016-03-24

100

javascript

这是我第一次使用 JavaScript 模块。我尝试上传图像并将其显示在 'id="imageholder"' 下的 div 中。

错误是：

uncaught type error :can't find property 'fileread' of undefined

HTML：

<html>

<body>
  <div id='imageholder' style='width:100px;height:100px;border:1px solid black;position:relative;left:100px;'></div>
  <input type='file' id='up' />
  <script src='myscript.js'></script>
  <script>
    document.getElementById('up').addEventListener('change', FileUpload.files, false);
  </script>
</body>

</html>

这是 myscript.js 模块文件，它应该返回名为 FileUpload 的对象。但错误显示它是 undefined 。为什么它是 undefined ？它很长，但当我不将其用作模块而是将其全部放在单个文件中时，它可以工作。

您可以跳到最后，可以看到我正在将对象文字返回给 FileUpload 变量。

var FileUpload = (function(fileElement) {

  var imageholder = document.getElementById('imageholder');

  function getBLOBFileHeader(url, blob, callback, callbackTwo) {
    var fileReader = new FileReader();
    fileReader.onloadend = function(e) {
      var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
      var header = "";
      for (var i = 0; i < arr.length; i++) {

        header += arr[i].toString(16);
      }
      console.log(header);
      var imgtype = callback(url, header); // headerCallback

      callbackTwo(imgtype, blob)
    };

    fileReader.readAsArrayBuffer(blob);
  }

  function headerCallback(url, headerString) {

    var info = getHeaderInfo(url, headerString);
    return info;
  }

  function getTheJobDone(mimetype, blob) {

    var mimearray = ['image/png', 'image/jpeg', 'image/gif'];

    if (mimearray.indexOf(mimetype) != -1) {
      printImage(blob);
    } else {
      fileElement.value = '';
      while (imageholder.firstChild) {
        imageholder.removeChild(imageholder.firstChild);
      }
      // alert('you can not upload this file type');
    }
  }

  function remoteCallback(url, blob) {
    getBLOBFileHeader(url, blob, headerCallback, getTheJobDone);
  }

  function printImage(blob) {
    // Add this image to the document body for proof of GET success
    var fr = new FileReader();
    fr.onloadend = function(e) {
      var img = document.createElement('img');
      img.setAttribute('src', e.target.result);
      img.setAttribute('style', 'width:100%;height:100%;');
      imageholder.appendChild(img);
    };

    fr.readAsDataURL(blob);
  }

  function mimeType(headerString) {

    switch (headerString) {

      case "89504e47":
        type = "image/png";
        break;
      case "47494638":
        type = "image/gif";
        break;
      case "ffd8ffe0":
      case "ffd8ffe1":
      case "ffd8ffe2":
        type = "image/jpeg";
        break;
      default:
        type = "image/pjpeg";
        break;
    }

    return type;
  }

  function getHeaderInfo(url, headerString) {
    return (mimeType(headerString));
  }

  // Check for FileReader support
  function fileread(event) {

    if (window.FileReader && window.Blob) {


      /* Handle local files */
      var mimetype;
      var mimearray = ['image/png', 'image/jpeg', 'image/gif'];

      var file = event.target.files[0];

      if (mimearray.indexOf(file.type) === -1 || file.size >= 2 * 1024 * 1024) {
        while (imageholder.firstChild) {
          imageholder.removeChild(imageholder.firstChild);
        }
        fileElement.value = '';

        file = null;
        return false;

      } else {

        while (imageholder.firstChild) {
          imageholder.removeChild(imageholder.firstChild);
        }
        remoteCallback(file.name, file);
      }
    } else {
      // File and Blob are not supported
      console.log('file and blob is not supported');
    }
  }
  return {
    files: fileread
  };
}(document.getElementById('up')))

Answer 1

它按照您提供的方式正常工作 jsfiddle.net/fredo5n8/ 这是证据。

您确定没有忘记清除浏览器中的缓存吗？如果是这种情况，请尝试在隐身（私人）窗口中运行代码。

编辑：

<html>

<body>
  <div id='imageholder' style='width:100px;height:100px;border:1px solid black;position:relative;left:100px;'></div>
  <input type='file' id='up' />
  <script id='myscript' src='myscript.js'></script>
  <script>
	var script = document.getElementById('myscript');
	var attachInputEvents = function () {
        document.getElementById('up').addEventListener('change', FileUpload.files, false);
	}
	script.onload=attachInputEvents();
  </script>
</body>

</html>

这样，您将等待脚本加载（我猜这就是问题所在，因为在我的本地机器上即使有单独的文件，它在 WAMP 服务器上也能很好地运行）