使用Camera上传照片后，手机浏览器会刷新页面

Mobile browser refreshes page after uploading a photo using Camera

本文关键字：浏览器 刷新 手机 Camera 照片 使用      更新时间：2023-09-26

我的网站上有一个相当常见的文件输入字段，用于上传图片:

<input name="photos" type="file" accept="image/*"/>

在dekstop上，它正常工作。在手机上，如果我从图库中选择一张已有的照片，它会正常工作，但如果我选择用相机拍照，它会切换到相机，我拍了照片，当我在相机应用程序中确认后，它会回到浏览器，但它会刷新页面，照片不会消失。输入将为空

添加捕捉部分地解决了这个问题。

<input name="photos" type="file" capture="environment" accept="image/*"/>

现在唯一的问题是用户不能从以前存在的照片中进行选择。

6年后再回到这个问题

这似乎与Android内存管理有关:

  • 浏览器启动摄像头应用
  • 相机应用成为前台，浏览器成为后台进程
  • Android，在操作系统级别，释放浏览器内存
  • 关闭相机后，浏览器再次进入前台，触发页面刷新。

From Android Memory Management:

当用户在应用程序之间切换时，Android将非前台应用程序(即对用户不可见或运行音乐播放等前台服务的应用程序)保存在缓存中。例如，当用户第一次启动应用程序时，会为它创建一个进程;但是当用户离开应用程序时，这个过程不会停止。系统保持进程缓存。如果用户稍后返回应用程序，系统会重用该过程，从而使应用程序切换更快。

如果你的应用程序有一个缓存进程，并且它保留了当前不需要的资源，那么你的应用程序-即使用户不使用它-也会影响系统的整体性能。当系统的资源(如内存)不足时，它会杀死缓存中的进程。系统还会考虑占用最多内存的进程，并可以终止它们以释放RAM。

注意:你的应用程序在缓存中消耗的内存越少，它不被杀死的机会就越好，并且能够快速恢复。但是，根据即时系统需求，缓存的进程有可能随时终止，无论它们的资源利用率如何。

capture工作的原因是它可能将浏览器进程保持在前台?

所以我个人会有两个按钮，一个用于选择现有文件，另一个用于使用相机:

<p>
  <label for="cameraFile">Take a picture:</label>
  <!-- Set "capture" to "user" to start frontal camera. -->
  <input name="cameraFile" type="file" capture="environment" accept="image/*"/>
</p>
<p>
  <label for="storageFile">Choose existing file:</label>
  <input name="storageFile" type="file" accept="image/*"/>
</p>

添加不带值的属性捕获!

<input name="photos" type="file" capture accept="image/*"/>
相关文章：