时间戳

首页 > 解决方案 > 已设置照片后单击上传时将图像重置为空

javascript - 已设置照片后单击上传时将图像重置为空

问题描述

我有一段代码允许在上传但未提交时看到图像。但是我发现，当您再次点击上传并取消上传/更改时，图像将保留但实际上不再保存以提交。我想要它，以便当您单击上传时，它每次都将元素设置为内部没有任何内容，并且当上传/onchange 完成时，图像会出现。然而它只是覆盖它并使它所以什么都看不到

// code for loading photo
var image = document.getElementById('output1');
    image.src = URL.createObjectURL(event.target.files[0]);
}

这是清除元素的代码 我将元素 ID 设置为 img.output 或 output1 我一直在来回尝试操作它，但没有任何变化都阻止图像现在显示

function Empty(elementID){
    document.getElementById(elementID).src = "#";
}

这是我想要操作的元素，应该添加图像，但在单击按钮时始终清除，并在从文件加载器打开完成时允许上传。

<p id ="output1"><img id="output" width="200" /></p>

所以我不确定我是否正在清除整个元素，这就是它完全删除的原因，或者它是否优先于 onclick 与当你点击打开以进行上传时发生的 onchange 。我想更多地解释它可能发生的事情，因为我知道它们单独工作都很好，但它们一起干扰。

编辑：有人要求完整的代码，有很多，所以我发布了涉及这部分的部分，一些代码连接到用于图片上传的 python 文件，不需要更改并且即使在看不到图片

忘了提到使用 django 所以这就是 csrf 令牌的来源

<p id ="output1"><img id="output" width="200" /></p>
                    
                    <form method="post" enctype="multipart/form-data"> <!--Upload Image to media file-->
                        {%csrf_token%}
                        <a><input type="file" style="display: none;" accept="image/x-png,image/jpeg" name="image" id="file" onchange="loadFile(event)" required/></a>
                        <button onclick = "Empty('img.output')" type="button" style="width: 100px; height: 30px; background-color: #008db1; border-radius: 10px; margin-top: 10px; margin-left: 10px;"><label for="file"  style="cursor: pointer;">Upload Image</label></button>
                        <!--Only allow png or jpeg files, so far browse only-->
                        <button type="BrowseComputer" style="cursor: pointer; width: 100px; height: 30px; background-color: #008db1; border-radius: 10px; margin-top: 10px; margin-left: 10px;">Submit</button>
                    </form>


<script>
                // add a reset to image on upload click & move it 
                function Empty(elementID){
                    document.getElementById(elementID).src = "#";
                 }

                var loadFile = function(event) {
                   
                var image = document.getElementById('output1');
                image.src = URL.createObjectURL(event.target.files[0]);
                 }

             </script>

标签： javascripthtml

解决方案

您的代码中有两个错误。

首先，当您调用该Empty()函数时，您已将其 elementID 参数设置为img.output，这不是一个 id。因此，您需要将其从更改img.output为output仅。

其次，您在 JavaScript 中使用了以下代码：

var image = document.getElementById('output1');
image.src = URL.createObjectURL(event.target.files[0]);

在这里，您尝试将元素的 src 设置为id = output. 在您的 HTML 中， output1 实际上是<p>元素。因此，您正在尝试设置段落的 src！所以，把它从

var image = document.getElementById('output1');

至

var image = document.getElementById('output');

最终的片段附在下面：

function Empty(elementID) {
  document.getElementById(elementID).src = "#";
}

var loadFile = function(event) {

  var image = document.getElementById('output');
  image.src = URL.createObjectURL(event.target.files[0]);
}
.btn {
  cursor: pointer;
  width: 100px;
  height: 30px;
  background-color: #008db1;
  border-radius: 10px;
  margin-top: 10px;
  margin-left: 10px;
}
<p id="output1"><img id="output" width="200" /></p>

<form method="post" enctype="multipart/form-data">
  <!--Upload Image to media file-->

  {%csrf_token%}

  <a><input type="file" style="display: none;" accept="image/x-png,image/jpeg" name="image" id="file" onchange="loadFile(event)" required/></a>

  <button onclick="Empty('output')" type="button" class="btn"><label for="file" style="cursor: pointer;">Upload Image</label></button>

  <!--Only allow png or jpeg files, so far browse only-->

  <button type="BrowseComputer" class="btn">Submit</button>
</form>

推荐阅读