上传文件显示错误信息，如何解决？答案

【问题标题】：Uploaded file show error message, how to solve?上传文件显示错误信息，如何解决？
【发布时间】：2022-01-24 23:56:34
【问题描述】：

我创建了一个带有图片的占位符，可以上传文件然后我创建一个条件，建议文件大小为 100 kb 或更大且小于 1mb 大小上传

var uploadField = document.getElementById("myImg");

uploadField.onchange = function() {
  // 1000000 = 1MB 
  if (this.files[0].size > 1000000) {
    alert("File is too big!");
    this.value = "";
  } else if (this.files[0].size < 100000) {
    alert("File not recommended size!");
    this.value = "";
  }
};

$('#myImg').change(function(event) {
  // var tmppath = URL.createObjectURL(event.target.files[0]);
  $("img#output").fadeIn("fast").attr('src', URL.createObjectURL(event.target.files[0]));

  // $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />

<input id="myImg" type="file">

我会遇到一些错误，如代码 sn-p 中所示，如果尺寸太大或不推荐尺寸，则会弹出一些错误

我收到类似“message”的错误：“Uncaught TypeError: Failed to execute 'createObjectURL' or “message”:“Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.”,

为什么会这样？

我该如何解决这个问题？

【问题讨论】：

你已经告诉我们你在做什么，但没有告诉我们问题是什么......？
hi 添加了错误信息
当用户选择一个文件时，UploadField.OnChange 已被调用并清除输入值，在此函数之后调用更改侦听器，并且 event.target.file 未定义所以你在这里得到一个错误。将两个功能结合在一起
尝试用if(event.target.files.length !== 0){}包裹$("img#output")
任何关于如何包装它的例子？

标签： javascript html jquery

【解决方案1】：

    var uploadField = document.getElementById("myImg");

    uploadField.onchange = function() {
      // 1000000 = 1MB 
      if (this.files[0].size > 1000000) {
        alert("File is too big!");
        this.value = "";
      } else if (this.files[0].size < 100000) {
        alert("File not recommended size!");
        this.value = "";
      }
    };

    $('#myImg').change(function(event) {
if(event.target.files[0]){
      // var tmppath = URL.createObjectURL(event.target.files[0]);
      $("img#output").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));
}else{
  alert('Image size mismatched.')
}

      // $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />

    <input id="myImg" type="file">

您唯一需要了解的是 Jquery 将根据更改触发，因此请确保在图像可用且不是不必要的情况下创建 URL 对象。只需将您的代码附加到 if else 中，它就会起作用。检查已根据修改的示例。

【讨论】：

感谢我调用了这段代码，但没有意识到我正在使用双重相同的方法并尝试使用 if else 使其工作......