文件大小条件导致 base64 字符串消失？

Question

根据我之前的 post 我想将我的图像文件设置为有大小限制，但是如果我设置了一个条件我就无法让它工作？

这里是下面的代码

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 数据不再显示我该如何解决这个问题？

Answer 1

问题中的代码为 #inputFileToLoad 的 onchange 提供了三个单独的事件处理程序。在 HTML 中的元素上声明了一个调用 encodeImageFileAsURL() 的元素。然后在第 25 行用 uploadField.onchange = function() { 覆盖，防止 encodeImageFileAsURL() 被调用。然后在第 36 行使用 $('#inputFileToLoad').change(function(event) {.

添加另一个 onchange 处理程序

您可以将所有这些逻辑放在 onchange 的单个事件处理程序中。这允许您根据需要对逻辑进行排序，如果存在问题（例如文件大小太大）阻止剩余代码执行，您也可以 return。

在下面的例子中我有：

在 HTML onchange="encodeImageFileAsURL(event);

encodeImageFileAsURL(event)

将代码从各种事件处理程序移至 encodeImageFileAsURL 函数，将 this 的引用更改为 event.target.
添加了一些 return 如果文件大小检查失败以阻止剩余代码执行的语句

示例如下，

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%;" />

文件大小条件导致 base64 字符串消失？

Condition of filesize cause base 64 string to be gone?

html

javascript

jquery

base64