安卓微信浏览器无法支持input multiple的h5属性多图上传

本文探讨了在安卓微信环境下H5多图上传功能的实现难点,详细解析了input multiple属性在安卓微信浏览器上的限制,并分享了一种通过微信js-sdk上传图片到微信服务器的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

H5手机端 实现多图上传的功能 但是实际上 安卓手机上只能义词上传一张图片(测试的机型:小米)代码如下:

在微信开发中遇见一个问题 应用上传插件安卓手机无法进行多张上传

当时现象:

微信浏览器选择安卓手机图库点击一张没有选择完成就自动关闭图库,在ios上没有问题,

经过多方面查找原因,之后总结:

原因:安卓微信浏览器无法支持input multiple的h5属性

后来只能通过微信的 js-sdk的方法进行上传

原理:通过微信js-sdk先把图片上传到微信服务器临时素材,之后通过回调函数得到media_id,后端通过media_id在微信接口把图片下载到服务器。

页面中嵌入

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript">

之后js中进行配置

wx.config({
debug: false,//是否开启调试模式
appId: "{$sign.appId}",//
timestamp: {$sign.timestamp},
nonceStr: '{$sign.nonceStr}',
signature: '{$sign.signature}',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi','chooseImage', 'previewImage', 'uploadImage', 'downloadImage','onMenuShareTimeline','chooseWXPay','getLocalImgData'
]
});
wx.ready(function () {
// 在这里调用 API
var images = {
localId: [],
serverId: []
};
var i=0;
document.querySelector('#chooseImage').onclick = function() {
if($(".uimg").length>0){
var thatcount=9-$(".uimg").length;
}else{
var thatcount=9;
}
wx.chooseImage({//选择图片
count:thatcount,//限制上传图片的张数
success: function(res) {
images.localId = res.localIds;
var str="";
var i = 0, length =images.localId.length;
images.serverId = [];
upload();
function upload() {
wx.uploadImage({//上传图片
localId: images.localId[i],
isShowProgressTips:0,
success: function(res) {

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT 老王

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值