在文件浏览器中单击“打开”时如何提交照片上传答案

【问题标题】：How to submit photo upload when clicking "open" in file browser在文件浏览器中单击“打开”时如何提交照片上传
【发布时间】：2018-12-02 03:41:42
【问题描述】：

现在，当用户单击图像时，文件浏览器将打开。但我想要的是在文件浏览器打开并选择文件后，单击“打开”后，表单将提交并上传。

这是我使用此处选择的答案得到的最接近的答案：Open File Browser on Link Click

代码：

<div class="col-sm-6">
    <img height="120" width="140" id="profileImage" alt="profile-image" class="userimg" style="margin-bottom: 1rem;" onclick="document.getElementById('imageFile').click();" src="<?php echo $image_src; ?>" />
</div>

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>?id=<?php echo $childId; ?>" method="post" enctype="multipart/form-data" id="imageForm" name="imageForm" class="text-center">
  <!--  <input type="submit" id="btn-imageUpload" value="Submit" name="submit" /> -->
    <input type="file"  style="display:none;" id="imageFile" name="profile-photo" onchange="this.form.submit() enctype=”multipart/form-data” capture/>
</form>

几乎成功了。当我在文件浏览器中单击“打开”时，页面提交并刷新，但照片根本没有上传。

但如果我使用页面上的“提交”按钮而不是文件浏览器中的“打开”按钮进行提交，效果会很好。

【问题讨论】：

您的代码有“智能”引号” 和无效的 HTML...在您的真实代码中真的是这样吗？
对不起，我是新手，还在学习中。不过谢谢！
新人很好，但你能回答这些类型的引号是否在你的代码中吗？如果是，请将它们替换为常规引号。此外，您可以在此处验证您的代码：validator.w3.org/#validate_by_input 这将帮助您解决此类问题。
他们是，因为这是我学会的方式，并且在其他代码中也看到了这种方式。谢谢你让我知道，非常感谢你的链接！非常有帮助，我很感激。
是的，那些花引号可以在代码上做一个数字，并在服务器端执行的代码和 JS 中彻底失败； HTML 可能是另一回事，一些浏览器可能会接受这些。如果这些实际上是您的代码的一部分，那么恕我直言，您接受的答案并没有解决所有问题，所以对我来说只是部分答案。编辑：按照@Brad 所说的那样做，并访问该站点以验证您现在使用的内容。我想你会发现它可能不会一帆风顺。

标签： javascript php html

【解决方案1】：

为您的文件输入添加一个事件监听器。一旦它识别出更改，您就可以将它们发送到他们需要去的地方。或者通过 AJAX 发出请求。

var form = document.querySelector('#profile_image'),
      input = document.querySelector('input[name="picture"]');

input.addEventListener('change', e => {
  e.preventDefault();
  // form.submit(); // Uncomment this line or change it to your preferred AJAX mechanism
  document.querySelector('body').innerHTML += 'Event Listener worked!';
});

<form action="/upload/profile/<?=$childId?>" method="POST" id="profile_image">

  <input type="file" name="picture" />

</form>

这应该很容易提交您的表单。

【讨论】：

-1 对于这个 FileReader 东西......这与问题完全无关，会让人误入歧途。没有理由。
@Brad 我明白你在说什么......我已经更新了我的答案。
@TaahiraCarter 没问题