Question

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

错误是：

未捕获的类型错误：找不到未定义的属性'fileread'

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>

这样，你会等待srcript加载（我猜这就是问题，因为在我的机器本地甚至使用单独的文件，它在WAMP服务器上运行良好）

为什么我得到未捕获的类型错误：找不到undefined的属性

1 个答案:

修改