Javascript 表格在按下按钮之前张贴

我在网上找到了下面的代码，可以在上传前预览图片。我只擅长使用经典的asp，当涉及到javascript时，我完全不懂，需要一些帮助。 我有一个简单的asp页面，其中包含一个表单，我可以选择一个图像，预览它，然后将表单发布到filesave.asp页面。 问题是，只要我按下“选择图像”按钮，页面就会在我选择图像之前发布。我认为问题在于“addEventListener”指令，但不知道如何解决它。 这是我在表格中的div：

<div id="preview-container">
<button id="upload-dialog">Choose Image</button>
<input type="file" id="image-file" name="image" accept="image/jpg,image/png" />
<img id="preview-image" />
<span id="image-name"></span>
<button id="upload-button">Upload</button>
<button id="cancel-image">Cancel</button>
</div>

选择图像
}))；

任何帮助都将不胜感激。
最好使用以下javascript和html进行测试


var\u PREVIEW\u URL；
document.addEventListener（“DOMContentLoaded”），函数（事件）{
/*显示选择文件对话框*/
document.querySelector（“上传对话框”）.addEventListener（'click'，function（）{
document.querySelector（“图像文件”）。单击（）；
});
/*所选文件已更改*/
document.querySelector（“#图像文件”）.addEventListener（'change'，function（）{
//用户选择的文件
var file=this.files[0]；
//允许的MIME类型
var mime_types=['image/jpeg'，'image/png']；
//验证MIME
if（mime_types.indexOf（file.type）=-1）{
警报（“错误：文件类型不正确”）；
返回；
}
//验证文件大小
如果（file.size>2*1024*1024）{
警报（“错误：超过2MB大小”）；
返回；
}
//验证成功
//隐藏上载对话框按钮
document.querySelector（“上传对话框”）.style.display='none'；
//设置文件名
document.querySelector（“#image name”）.innerText=file.name；
document.querySelector（“#image name”）.style.display='inline block'；
//本地url
_PREVIEW_URL=URL.createObjectURL（文件）；
//设置图像和显示的src
document.querySelector（“#预览图像”）.setAttribute（'src'，_preview_URL）；
document.querySelector（“#预览图像”）.style.display='inline block'；
//立即显示取消和上载按钮
document.querySelector（“#取消图像”）.style.display='inline block'；
document.querySelector（“上传按钮”）.style.display='inline block'；
});
/*重置文件输入*/
document.querySelector（“取消图像”）.addEventListener（'click'，function（）{
//销毁以前的本地url
revokeObjectURL（\u PREVIEW\u URL）；
//显示上传对话框按钮
document.querySelector（“上传对话框”）.style.display='inline block'；
//重置为无选择
document.querySelector（“#图像文件”）。值=”；
//隐藏不需要的元素
document.querySelector（“#image name”）.style.display='none'；
document.querySelector（“预览图像”）.style.display='none'；
document.querySelector（“取消图像”）.style.display='none'；
document.querySelector（“上传按钮”）.style.display='none'；
});
/*将文件上载到服务器*/
document.querySelector（“上传按钮”）.addEventListener（'click'，function（）{
//对服务器的AJAX请求
警报（'这将向服务器上载文件'）；
});
});

选择图像
上传
取消
尝试更换相同的问题。一旦我选择了图片，表单就会发布，而我需要预览的图片一直保留到按下上传按钮。米勒，首先感谢你的帮助，但我仍然有问题。我的意思是，如果我以这样的形式输出html代码：container div、form、code、end form和div，只要我选择了图像，表单就会提交，而我需要按下upload按钮，然后表单就会发布。不幸的是，我完全不懂javascript。
<script>
  var _PREVIEW_URL;

  /* Show Select File dialog */
  document.querySelector("#upload-dialog").addEventListener('click', function() {
  document.querySelector("#image-file").click();
  });

  /* Selected File has changed */
  document.querySelector("#image-file").addEventListener('change', function() {
  // user selected file
  var file = this.files[0];

  // allowed MIME types
  var mime_types = [ 'image/jpeg', 'image/png' ];

 // validate MIME
 if(mime_types.indexOf(file.type) == -1) {
    alert('Error : Incorrect file type');
    return;
  }

  // validate file size
  if(file.size > 2*1024*1024) {
    alert('Error : Exceeded size 2MB');
    return;
  }

  // validation is successful

  // hide upload dialog button
  document.querySelector("#upload-dialog").style.display = 'none';

  // set name of the file
  document.querySelector("#image-name").innerText = file.name;
  document.querySelector("#image-name").style.display = 'inline-block';

  // local url
  _PREVIEW_URL = URL.createObjectURL(file);

  // set src of image and show
 document.querySelector("#preview-image").setAttribute('src', _PREVIEW_URL);
 document.querySelector("#preview-image").style.display = 'inline-block';

 // show cancel and upload buttons now
 document.querySelector("#cancel-image").style.display = 'inline-block';
 document.querySelector("#upload-button").style.display = 'inline-block';
 });

 /* Reset file input */
 document.querySelector("#cancel-image").addEventListener('click', function() {
 // destroy previous local url
 URL.revokeObjectURL(_PREVIEW_URL);

// show upload dialog button
 document.querySelector("#upload-dialog").style.display = 'inline-block';

// reset to no selection
 document.querySelector("#image-file").value = '';

// hide elements that are not required
 document.querySelector("#image-name").style.display = 'none';
 document.querySelector("#preview-image").style.display = 'none';
 document.querySelector("#cancel-image").style.display = 'none';
 document.querySelector("#upload-button").style.display = 'none';
 });

/* Upload file to server */
document.querySelector("#upload-button").addEventListener('click', function() {
// AJAX request to server
alert('This will upload file to server');