上傳檔案顯示錯誤資訊，如何解決？-有解無憂

我創建了一個帶有能夠上傳檔案的影像的占位符，然后我創建了一個條件，建議檔案大小為 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">

我會遇到一些錯誤，如代碼片段中顯示的那樣，如果尺寸太大或不推薦尺寸，會彈出一些錯誤

我收到類似 "message": "Uncaught TypeError: Failed to execute 'createObjectURL' or "message": "Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.",

為什么會這樣？

我該如何解決這個問題？

uj5u.com熱心網友回復：

    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 中，它就會起作用。檢查已按原樣修改的示例。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/392230.html

標籤：javascript html 查询

上一篇：文本框游標向右

下一篇：為什么當我調整我的選擇時第一個元素被選中？