安卓微信浏览器无法支持input?multiple的h5属性多图上传
在H5手机端开发中,实现多图上传功能是一个常见的需求。通常情况下,我们可以通过input标签的multiple属性来实现一次选择多张图片上传的功能。然而,在安卓微信浏览器中,却发现无法支持input的multiple属性,导致只能一次上传一张图片。
这个问题在我使用小米手机进行测试时尤为明显。在代码中,我使用了类似以下的input标签来实现多图上传功能:
然而,当我在安卓微信浏览器中尝试选择多张图片上传时,却发现只能选择一张图片。这让我感到困惑,因为在其他浏览器和iOS设备上,这段代码是可以正常工作的。
经过一番调查和研究,我发现了这个问题的根本原因:安卓微信浏览器不支持input的multiple属性。这意味着无论我们如何设置input标签,安卓微信浏览器都只会认为我们只能选择一张图片进行上传。
为了解决这个问题,我尝试了多种方法。最终,我找到了一个可行的解决方案:通过微信的JS-SDK来实现多图上传功能。通过调用微信的chooseImage接口,我们可以在安卓微信浏览器中实现一次选择多张图片上传的功能。
以下是我修改后的代码示例:
document.getElementById('chooseImage').onclick = function(){
wx.chooseImage({
count:9, // 最多可以选择的图片张数 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片 var preview = document.getElementById('preview');
preview.innerHTML = '';
for(var i=0; i var img = document.createElement('img'); img.src = localIds[i]; preview.appendChild(img); } } }); }; 通过以上代码,我们可以在安卓微信浏览器中实现一次选择多张图片上传的功能。当用户点击选择图片按钮时,会调用微信的chooseImage接口,用户可以选择多张图片进行上传,并且在页面上显示预览。 总的来说,虽然安卓微信浏览器不支持input的multiple属性,但是通过微信的JS-SDK,我们依然可以实现多图上传的功能。希望以上内容对您有所帮助。