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

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

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

当时现象：

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

经过多方面查找原因，之后总结：

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

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

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

页面中嵌入

之后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 file图片上传无法触发change事件
问题现象项目中遇到一个上传图片的功能,使用了file作为选择上传,需要做图片预览等功能.在多方测试后没有问题,但在安卓微信浏览器中却发现change事件失效无法触发. 解决办法由于在项目中我是用来 ...
解决安卓微信浏览器中location.reload 或者 location.href失效的问题
解决安卓微信浏览器中location.reload 或者 location.href失效的问题参考文章: (1)解决安卓微信浏览器中location.reload 或者 location.href失 ...
安卓微信浏览器唤起系统内部浏览器
安卓微信浏览器唤起系统内部浏览器最近因为公司项目需求,需要做一个功能.使用微信浏览器打开高德地图导航,经试验,高德web端没有导航功能,其实现原理是调起高德APP来实现导航的操作.然后把代码写进微 ...
安卓微信浏览器返回上一页默认读取缓存解决方案
安卓微信浏览器返回上一页默认读取缓存解决方案参考文章: (1)安卓微信浏览器返回上一页默认读取缓存解决方案 (2)https://www.cnblogs.com/AlexBlogs/p/577727 ...
HTML5 原生API input file 来实现多图上传，并大图预览
闲来无事,突然想用原生来实现图片的多图上传. 一.效果图大致如下: 1.上传时可以选择多图 2.上传之后缩略图下过图如下: 3.点击缩略图,大图展示当前所点击的图片,并可以左右滑动查看其它的缩略图对应 ...
JQ input框单多图上传
上传文件大家前端都是用input file上传图片,今天使用layer插件的配合写一个支持单多图上传的前端后台还是如此一会也有upload方法 1.引入layer.js文件是必须的 (同时也要引入j ...
android多文件上传错误,微信多图上传解决android多图上传失败问题
微信提供了文件上传的方法wx.uploadFile来上传我们的图片 wx.chooseImage({ success: function(res) { var tempFilePaths = res. ...
微信端图片压缩转base64，然后转file形式上传
<input id="file" type="file" class="upload-file"> <div class= ...
微信多图上传，解决android多图上传失败问题
微信提供了文件上传的方法wx.uploadFile来上传我们的图片 wx.chooseImage({success: function(res) {var tempFilePaths = res.te ...

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

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

最新文章

热门文章