我是靠谱客的博主 明理豌豆,最近开发中收集的这篇文章主要介绍安卓微信浏览器无法支持input multiple的h5属性多图上传,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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) {

最后

以上就是明理豌豆为你收集整理的安卓微信浏览器无法支持input multiple的h5属性多图上传的全部内容,希望文章能够帮你解决安卓微信浏览器无法支持input multiple的h5属性多图上传所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(41)

评论列表共有 0 条评论

立即
投稿
返回
顶部