檔案大小的條件導致base64字串消失？

基于我之前的帖子如何將影像從影像源轉換為 Base64 字串？我想將我的影像檔案設定為有大小限制，但是如果我設定了條件，我就無法讓它作業？

這里是下面的代碼

function encodeImageFileAsURL() {

  var filesSelected = document.getElementById("inputFileToLoad").files;
  if (filesSelected.length > 0) {
    var fileToLoad = filesSelected[0];

    var fileReader = new FileReader();

    fileReader.onload = function(fileLoadedEvent) {
      var srcData = fileLoadedEvent.target.result; // <--- data: base64

      var newImage = document.createElement('img');
      newImage.src = srcData;

      document.getElementById("output").src = newImage.src;
      alert("Converted Base64 version is "   document.getElementById("output").src);
      console.log("Converted Base64 version is "   document.getElementById("output").src);
    }
    fileReader.readAsDataURL(fileToLoad);
  }
}

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

    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 = "";
      }
    };

    $('#inputFileToLoad').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>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />

如果我有我的情況，我的 base 64 資料不再顯示，我該如何解決這個問題？

uj5u.com熱心網友回復：

問題中的代碼具有三個單獨的事件處理程式onchangeof #inputFileToLoad。在 HTML 中的元素上宣告了一個呼叫encodeImageFileAsURL(). 然后在第 25 行覆寫，uploadField.onchange = function() {防止encodeImageFileAsURL()被呼叫。onchange然后在第 36 行添加了另一個處理程式$('#inputFileToLoad').change(function(event) {。

您可以將所有這些邏輯放在單個事件處理程式中onchange。這允許您根據需要對邏輯進行排序，如果存在阻止剩余代碼執行的問題（例如檔案大小太大），您也可以回傳。

在下面的示例中，我有：

• encodeImageFileAsURL(event)在 HTML 中添加要作為引數傳遞的事件onchange="encodeImageFileAsURL(event);
• 移動從各種事件處理程式代碼到encodeImageFileAsURL功能，改變參考this到event.target.
• 如果檔案大小檢查未能阻止剩余代碼執行，則添加了一些回傳陳述句

例子如下，

function encodeImageFileAsURL(event) {

  // File Size Checks
  if (event.target.files[0].size > 1000000) {
    alert("File is too big!");
    event.target.value = "";
    return;
  } else if (event.target.files[0].size < 100000) {
    alert("File not recommended size!");
    event.target.value = "";
    return;
  }

  // Update image on page
  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.')
    return;
  }

  // Base64 conversion
  var filesSelected = event.target.files;
  if (filesSelected.length > 0) {
    var fileToLoad = filesSelected[0];
    var fileReader = new FileReader();

    fileReader.onload = function(fileLoadedEvent) {
      var srcData = fileLoadedEvent.target.result; // <--- data: base64
      var newImage = document.createElement('img');
      newImage.src = srcData;

      document.getElementById("output").src = newImage.src;
      alert("Converted Base64 version is "   document.getElementById("output").src);
      console.log("Converted Base64 version is "   document.getElementById("output").src);
    }
    fileReader.readAsDataURL(fileToLoad);
  }
}

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

標籤：javascript html 查询 base64

上一篇：Jquery隱藏同一父級中的“兄弟姐妹”元素

下一篇：是否可以回圈遍歷switch陳述句