设置照片后点击上传将图片重置为空

Question

我有一段代码，允许在上传但未提交时看到图像。但是我发现，当你再次点击上传并取消上传/更改图像时，图像将保留，但实际上不再保存以提交。我想让它，当你点击上传它设置元素没有任何内部每次，当上传/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 vs当你点击打开上传时发生的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>

Answer 1

你的代码中有两个错误。

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

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

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

在这里，您试图用id = output设置元素的src。在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>