HTML文件输入控件的capture和accept属性无法正常工作
什么是capture和accept属性？
在HTML中，有两个属性capture和accept可以控制文件输入控件的行为。
capture属性
capture属性定义了<input>标签接受媒体捕获设备内容的能力。如果该属性被设置为"camera"或"microphone"之一，控件就会打开相应的设备以进行拍照或录音操作。
以下是一个展示控件的代码样例：
<input type="file" accept="image/*;capture=camera">使用该代码将打开拍照机器。
accept属性
accept属性描述了用户可以选择的文件类型以及系统应该如何处理这些文件，其中包括文件扩展名、MIME类型和可以接受的音频、视频和图像渲染格式。
语法格式如下：
<input type="file" accept="audio/*">上述代码将启用文件选择器以允许选择音频类型。
为什么会无法正常工作？
尽管capture和accept属性的用途广泛，但它们的实现却存在一些缺陷。在某些设备和浏览器中，这些属性可能无法正常工作或不支持某些值。
一些常见的问题包括：
设备控件无法响应capture属性的值（例如Google Chrome浏览器在iOS中的相机）
某些浏览器不能正常处理英特网媒体类型（例如Apple Safari不能正确处理“image/*”类型）
由于安全原因，浏览器可能无法访问设备文件系统，从而使控件无法使用accept属性中指定的MIME类型过滤文件
如何解决这些问题？
虽然有些问题无法完全解决，但我们可以通过以下方法来减少这些问题的影响：
尽可能使用标准类型
尽可能使用标准文件类型（例如“image/png”）可以确保控件在尽可能多的浏览器和设备上正常工作。
使用innerHTML属性
使用<input>标签的innerHTML属性可以在实时创建页面元素时设置控件属性。这种方法可能会在某些浏览器和设备上弥补属性值无法正常工作的问题。
<input type="file" id="myFile"></input>
<script>
document.getElementById("myFile")[xss_clean] = "<i>File caption...</i>";
</script>
避免使用非标准属性
避免使用难以识别为标准属性的属性，因为这些属性可能无法正常工作，也可能被未来的HTML版本所删除。
假设某人编写的代码包含了以下控件：
<input type="file" capture="camera">由于capture属性不是标准属性，而且该值不是标准值，可能会导致意外问题。为了避免这种情况，可以使用JavaScript来代替非标准属性。
结论
HTML中的capture和accept属性使我们能够更好地控制文件输入控件的行为。尽管在不同的设备和浏览器上，它们可能有时无法正常工作，但我们可以采取以下方法避免这些情况：
尽可能使用标准类型
使用innerHTML属性
避免使用非标准属性
在编写代码时，我们应该意识到这些属性存在的局限性，并努力实现可用性和操作性的平衡。