input[type=file]上传图片的兼容问题

最新推荐文章于 2024-08-30 14:50:04 发布

原创最新推荐文章于 2024-08-30 14:50:04 发布 · 656 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #file #调用相机

这段代码展示了在系统浏览器和微信环境下，HTML的文件输入标签(inputtype=file)在处理普通文件选择、相机访问、文件类型限制以及多选功能时的不同行为。在Android和iOS上，某些功能如仅相机访问或仅文件选择存在平台特定的限制。

环境：系统浏览器
先测试一段代码：

<h2>普通</h2> 可多选
<input type="file" />

<h2>相机</h2> Android仅文件  iOS仅相机
<input type="file" capture="camera" />

<h2>文件</h2> 可多选
<input type="file" accpet="image/*" />

<h2>相机文件</h2> Android仅文件 iOS仅相机
<input type="file" accpet="image/*"  capture="camera"/>

<h2>多选</h2> 多选
<input type="file"  mutiple="mutiple"/>

<h2>多选相机文件</h2> Android仅文件  iOS仅相机
<input type="file" accpet="image/*"  capture="camera"  mutiple="mutiple"/>

<h2>文件类型</h2> 可多选
<input type="file" accpet="image/png,image/jpeg,image/jpg" />

<h2>相机文件类型</h2> Android仅文件 iOS仅相机
<input type="file" capture="camera" accpet="image/png,image/jpeg,image/jpg" />

<h2>相机文件多选</h2> Android仅文件 iOS仅相机
<input type="file" mutiple="mutiple" capture="camera" accpet="image/png,image/jpeg,image/jpg" />

环境：微信

<h2>普通</h2> Android仅文件   iOS可多选
<input type="file" />

<h2>相机</h2> Android仅文件  iOS仅相机
<input type="file" capture="camera" />

<h2>文件</h2> 可多选
<input type="file" accpet="image/*" />

<h2>相机文件</h2> Android仅文件 iOS仅相机
<input type="file" accpet="image/*"  capture="camera"/>

<h2>多选</h2> 多选
<input type="file"  mutiple="mutiple"/>

<h2>多选相机文件</h2> Android仅文件  iOS仅相机
<input type="file" accpet="image/*"  capture="camera"  mutiple="mutiple"/>

<h2>文件类型</h2> 可多选
<input type="file" accpet="image/png,image/jpeg,image/jpg" />

<h2>相机文件类型</h2> Android仅文件 iOS仅相机
<input type="file" capture="camera" accpet="image/png,image/jpeg,image/jpg" />

<h2>相机文件多选</h2> Android仅文件 iOS仅相机
<input type="file" mutiple="mutiple" capture="camera" accpet="image/png,image/jpeg,image/jpg" />