javascript - 为什么我收到未捕获的类型错误 :can't find property of undefined-6ren

javascript - 为什么我收到未捕获的类型错误 :can't find property of undefined

转载作者：行者123 更新时间：2023-12-03 07:20:57

25

4

这是我第一次使用 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 的对象。但错误表明它是未定义。为什么会这样未定义？它很长，但是当我不像模块那样使用它而是全部在一个文件中时它就可以工作。

您可以跳到最后，可以看到我正在向 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')))

最佳答案

正如您提供的那样，它工作正常jsfiddle.net/fredo5n8/这里就是证明。

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

编辑:

<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 服务器上托管也能正常工作)

关于javascript - 为什么我收到未捕获的类型错误 :can't find property of undefined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36210889/

25

4

0

文章推荐： CouchDB 一个现实世界的例子

文章推荐： javascript - 如何在Angular 2中从父级调用@Input EventEmitter

文章推荐： Eclipse 不从表创建 JPA 实体

java - 几个 "ChildException"捕获 block 与一个 "Exception"捕获 block
多个 ChildException catch block 和一个 Exception catch block 之间哪个更好？更好，我的意思是以良好的实践方式。举例说明: public stati
通过测试连接进行Powershell尝试/捕获
我正在尝试将脱机计算机记录在文本文件中，以便以后可以再次运行它们。似乎没有被记录或捕获。 function Get-ComputerNameChange { [CmdletBinding()]
scala - 拦截与尝试/捕获
我正在将 Scala 'try/catch' 测试代码转换为使用 'intercept' 有没有我不应该使用“拦截”的场景？使用 'intercept' 而不是 'try/catch' 的唯一好处是简
erlang - 如何在Erlang中进行尝试/捕获
我对erlang很陌生，我正在尝试使用基本的try/catch语句来工作。我正在使用Webmachine处理一些请求，我真正想做的就是解析一些JSON数据并将其返回。如果JSON数据无效，我只想返回一
delphi - 捕获 'delete'按键
我不知道如何捕获删除按键。我发现在 ASCII 代码表中，它位于 127 位，但是 if (Key = #127) then 却无济于事。然后我检查了 VK_DELETE 的值，它是 47。尝试使用
php - 对所有PDO查询进行一次全局尝试{}捕获{}
我很少在失败时对数据库查询使用唯一的错误消息我经常使用简短的标准消息，例如“数据库错误/失败。请与网站管理员联系”或类似的消息。或自动发送给我我正在寻找一种在PDO中全局设置一次try {}和ca
Java : CompletableFuture 捕获
我有一个变量CompletableFuture completableFuture 。我希望能够使用任何类型的对象来完成它。例如:completableFuture.complete(new Stri
Java 捕获 IOException
我认为这是基本的东西，但我不知道该怎么做。为什么我得到 IOException never throw in body of相应的 try 语句 public static void main(Str
java - 捕获 JSONException
我在此代码中遇到 JSON 异常: JSONObject jObject = new JSONObject(JSONString); pontosUsuario.setIdUsuari
单引号之间的 Perl 捕获
我正在尝试打印出用单引号括起来的文本。 /bin/bash -lc '/home/CASPER_REPORTS/scripts/CASPER_gen_report.sh CASPER_1' /bin/
java - 捕获 IllegalArgumentException？
我这里遇到了一点问题。我想弄清楚如何捕获 IllegalArgumentException。对于我的程序，如果用户输入负整数，程序应该捕获 IllegalArgumentException 并询问用户
java - 捕获 EJBTransactionRolledbackException
我无法理解 EJBTransactionRolledbackException。我有实体: @Entity public class MyEntity { @Id @Generate
.net - 实时网络使用统计监控/捕获？
对于我给自己提出的以下挑战，如果社区的经验给我任何建议，我将不胜感激 - 即，这里有任何关于最佳方法/方向的指示吗？要求允许收集/实时监控从用户 Windows PC 到一组特定 IP 地址(或
exception - 捕获 SAPSQL_DATA_LOSS
我想在我的 ABAP 代码中捕获并处理 SAPSQL_DATA_LOSS。我试过这个: try. SELECT * FROM (rtab_name) AS rtab
java - 捕获 UnsatisfiedLinkError
我知道捕获错误不是一个好的做法，但在这种情况下，这样做很重要。我正在尝试运行一个包含游戏一部分的 jar，但它给了我一个 unsatisfiedlink 错误，但这是有趣的部分:我正在使用这段代码:
java - 捕获 GenericJDBCException
我有一个表单页面，当我保存它时，它会覆盖数据库。表单页面中有一个文本框，允许用户输入 4000 个字符，但如果用户输入的字符超过此值，则会出现以下错误: ERROR 15:54:05 Abstrac
Python键绑定(bind)/捕获
我想知道在python中绑定(bind)键的最简单方法例如，默认的 python 控制台窗口出现并等待，然后在 psuedo -> if key "Y" is pressed: print (
java - 捕获 NumberFormatException
下面是别人写的类。我面临的问题是，当它进入parse method时与 null as the rawString ，它正在扔NumberFormatException 。所以我想做的是，我应该捕
jquery - 捕获/拦截所有鼠标点击
我有一个简单的脚本，可以捕获所有鼠标单击，除非您单击实际有效的内容。链接、Flash 视频等。我如何调整它，以便无论用户点击什么，在视频加载、新页面加载等之前，它都会发送我构建的简单 GET 请求？
当选择列表值更改而没有更改事件时，Jquery 捕获
我有一个带有一些选择列表的表单，当选择某些值时，这些列表将显示/隐藏更多输入字段。问题是大多数用户都是数据输入人员，因此他们在输入数据时大量使用键盘，并且选择列表的 change 事件仅在焦点离开输

首页

博学

6Ren·AI

商城

javascript - 为什么我收到未捕获的类型错误 :can't find property of undefined

编辑: