Question

我正在建立一个页面，用户可以在其中添加图像到他的个人资料。我有三个要素。

尚无图像的占位符。（上传框）
通过文件输入（preview-img）预览选定的图像
预览数据库中已存在的当前图像（current-img）

我想根据情况隐藏或显示这些元素，但是当我想将要隐藏/显示的元素的ID放在document.getElementById（）中时，它为null，但是console.log（）参数的显示就很好了。

HTML：

<div class="pf-field img-field">
  <div class="uploadbox" id = "box1">
    <label for="file-upload1" class="custom-file-upload" >
      <i class="la la-cloud-upload"></i> <span>Upload Image</span>
    </label>
  </div>
  <label for="file-upload1" class="custom-file-upload" >
    <img id="img1" class="preview-img" src="placeholder.jpg" alt="your image" />
    <img class="current-img" src="{{user:img_1}}" alt="your image" />
  </label>
  <input name="image_1" type="file" title="file-upload1" class="hide" id="file-upload1" onchange="readURL(this, img1, box1);">
</div>

JS：

function readURL(input, preview, box) {       
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $(preview)
        .attr('src', e.target.result);
      console.log(box); // Output: <div id="box1" class="uploadbox"> fotoimpressie:263:23
      console.log(preview); // Output: <img id="img1" class="preview-img" src="removed for readability" alt="your image"> fotoimpressie:264:23
      document.getElementById(box).style.display = "none";
      document.getElementById(preview).style.display = "block";
    }
    reader.readAsDataURL(input.files[0]);
  }
}

我在这里做什么错了？

Answer 1

您可以使用我测试过的这段代码。

function readURL(input, preview, box) {       
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
          $(preview).attr('src', e.target.result);
          document.getElementById("box1").style.display = "none";
          document.getElementById("img1").style.display = "block";
        }
        reader.readAsDataURL(input.files[0]);
      }
    }

<div class="pf-field img-field">
      <div class="uploadbox" id = "box1">
	    <label for="file-upload1" class="custom-file-upload" >
          <i class="la la-cloud-upload"></i> <span>Upload Image</span>
        </label>
      </div>
      <label for="file-upload1" class="custom-file-upload" >
        <img id="img1" class="preview-img" src="placeholder.jpg" alt="your image" />
        <img class="current-img" src="{{user:img_1}}" alt="your image" />
      </label>
      <input name="image_1" type="file" title="file-upload1" class="hide" id="file-upload1" onchange="readURL(this, img1, box1);">
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

问题出在您的参数和使用函数中

function readURL(input) {       
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $('#img1').attr('src', e.target.result);
      document.getElementById('box1').style.display = "none";
      document.getElementById('img1').style.display = "block";
    }
    reader.readAsDataURL(input.files[0]);
  }
}

Answer 3

如上所述，您正在将整个HTML元素传递给'getElementById'，但是该函数需要一个字符串，其元素的ID不是元素本身。

Answer 4

此代码有效。区别在于，您尝试使用getElementbyId(box1)获取box1对象，但是参数box1已经是您想要的对象。

因此，我评论了最后两行，并添加了另外两行，这些行将变量作为对象变量而不是字符串变量来处理。

另一件事：添加单引号将使其变为静态。但是，当您将对象作为变量转发时，则必须利用它们。

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div class="pf-field img-field">
  <div class="uploadbox" id = "box1">
    <label for="file-upload1" class="custom-file-upload" >
      <i class="la la-cloud-upload"></i> <span>Upload Image</span>
    </label>
  </div>
  <label for="file-upload1" class="custom-file-upload" >
    <img id="img1" class="preview-img" src="placeholder.jpg" alt="your image" />
    <img class="current-img" src="{{user:img_1}}" alt="your image" />
  </label>
  <input name="image_1" type="file" title="file-upload1" class="hide" id="file-upload1" onchange="readURL(this, img1, box1);">
</div>
<script>
function readURL(input, preview, box) {       
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
      $(preview)
        .attr('src', e.target.result);
      console.log(box); // Output: <div id="box1" class="uploadbox"> fotoimpressie:263:23
      console.log(preview); // Output: <img id="img1" class="preview-img" src="removed for readability" alt="your image"> fotoimpressie:264:23
      //document.getElementById(box).style.display = "none";
      //document.getElementById(preview).style.display = "block";
      box.style.display = "none";
      preview.style.display = "block";
    }
    reader.readAsDataURL(input.files[0]);
  }
}
</script>

Answer 5

执行此操作；

document.getElementById(box.id).style.display = "none";
document.getElementById(preview.id).style.display = "block";

或者这个；

box.style.display = "none";
preview.style.display = "block";

我想隐藏一个元素，但是document.getElementById（）为null

5 个答案: