今天在手机上调试页面的时候发现的问题,电脑上上传图片没问题,到了手机浏览器,就上传不了了。
具体的问题是这样的,点击上传按钮,可以跳出选择拍照和图库的选项,拍照或者选择图片以后,没有调起上传的方法,下面几个方法也没有调用。
uploader.on( 'fileQueued', function( file ) {
});
uploader.on( 'uploadProgress', function( file, percentage ) {
});
uploader.on( 'uploadSuccess', function( file, response ) {
});
uploader.on( 'uploadError', function( file ) {
});
uploader.on( 'uploadComplete', function( file ) {
});
经过排查,发现是配置uploader的accept参数出了问题。官方文档上对这个参数的示例是这样的:
accept: {
title: 'Files',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
我们项目为了可以上传其他格式的文件,开始的时候配置是这样的:
accept: {
title: 'Files',
extensions: 'doc,xls,docx,xlsx,pdf,jpg,png,rar,zip',
mimeTypes: '.doc,.xls,.docx,.xlsx,.pdf,.rar,.zip,image/*'
},
这个配置,在电脑是测试上传图片是没问题的,但是到了手机浏览器上,就失效了。于是我改成了下面的配置:
accept: {
title: 'Files',
extensions: 'doc,xls,docx,xlsx,pdf,rar,zip,gif,jpg,jpeg,bmp,png',
mimeTypes: '.doc,.xls,.docx,.xlsx,.pdf,.rar,.zip,image/*'
},
然后手机就可以上传图片了。
还有一个问题没解决,就是上传图片的时候,可以选择多张的问题,官方文档如下
pick {Selector, Object} [可选] [默认值:undefined] 指定选择文件的按钮容器,不指定则不创建按钮。
id {Seletor|dom} 指定选择文件的按钮容器,不指定则不创建按钮。注意 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
label {String} 请采用 innerHTML 代替
innerHTML {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
multiple {Boolean} 是否开起同时选择多个文件能力。
我的代码如下:
pick: {
id: '#addfilebtn',
multiple:false
},
multiple设置了false,但是还是可以选择多张图片,有人可以告诉我为什么吗,求助。。。