plupload 在手机端无法上传

<button id="pickfiles" >pickup</button>
<DIV id="container"></DIV>

<script type="text/javascript" src="plupload/plupload.full.min.js"></script>

<script type="text/javascript">
var uploader = new plupload.Uploader({
    runtimes : 'html5',
    browse_button : 'pickfiles', // you can pass an id...
    container: document.getElementById('container'), // ... or DOM Element itself
    url : 'http://up.qiniu.com',    
    //flash_swf_url : 'plupload/Moxie.swf',
    multipart_params: {
        // token从服务端获取,没有token无法上传
        token: 'Bm9_rHcZ1hCBFmlToadl8x1oAjJpygo8EFO_xy9r:LJpTjShv3QUENxn3yqVOlwg_3ks=:eyJzY29wZSI6InRlc3QiLCJkZWFkbGluZSI6MTQ0NDI3NDIxNn0=',
    },
    filters : {
        max_file_size : '5mb',
        mime_types: [
            {title : "Image files", extensions : "jpg,gif,png"},
            {title : "Zip files", extensions : "zip"}
        ]
    },

    init: {
        PostInit: function() {
            console.log("upload init");
        },
        FilesAdded: function(up, files) {

            //选择文件后直接上传, 或可改成点击按钮上传
            uploader.start();
        },
        UploadProgress: function(up, file) {

        },
        FileUploaded: function(up, file, info) {
            //{response: "{"hash":"FjTrY2r9G1pXtxiN-jAi6qb2E1tz","key":"FjTrY2r9G1pXtxiN-jAi6qb2E1tz"}", status: 200, responseHeaders: "Pragma: no-cache"}

            console.log(info);
        },
        UploadComplete: function(up, files) {
            // Called when all files are either uploaded or failed
            console.log('[完成]');
        },
        Error: function(up, err) {
            alert(err.response);
        }
    }
});

uploader.init();


</script>

plupload 在PC端上传没问题,但在手机上访问或使用chrome的手机模式,点击按钮没有任何反应,没报错,官方的demo也一样。。是不是不支持手机端。

阅读 15.4k
12 个回答

把这行:

            {title : "Image files", extensions : "jpg,gif,png"},

注释掉试试。

我用过这东西,手机上没用过,总之功能很强大,我现在用百度的webuploader

新手上路,请多包涵

我可以明确的告诉你,手机上支持。我们公司目前用的就是plupload,pc手机上都可以。

发现问题所在了,移动端的话默认将jpg的格式也处理成image/jpeg了,所以上传jpeg的没问题,上传jpg的话就没效果,打开浏览器看上传的那个input按钮的属性就发现问题是这了:
accept="image/jpeg,image/png,image/bmp,application/pdf"
图片描述

直接修改源码plupload.full.min.js
图片描述
找到图上这个位置,将原来的
(l ? ' accept="' + l.join(",") + '"' : "")
改为
(l ? ' accept="image/jpg,' + l.join(",") + '"' : "")
默认就支持上传jpg格式的,再去看网页结构:
图片描述
accept="image/jpg,image/bmp,image/jpeg,image/png,application/pdf"
再去移动端用Android和iOS手机试试,是不是ok了呢

新手上路,请多包涵

改了,我还是不能在手机上使用

新手上路,请多包涵

如果仅上传图片,可以:
注释这参数 // mime_types : [ { title : "Image files", extensions : "jpg,png,gif" }],
然后将pload.full.min.js中 accept="'+d.join(",")... 换成 accept="image/*,'+d.join(",")+'...

新手上路,请多包涵

补充一下@tzws的答案,光去掉那一行没用,把整个mime_types去了!相当舒服!

新手上路,请多包涵

mime_types: [ //允许文件上传类型

                {
                    title: "files",
                    extensions: "jpg,png,gif,jpeg"//这一行加上jpeg然后服务器接收的加上jpeg就好了
                }
            ]

在华为手机微信多开的情况下,通过微信打开H5页面,plupload就不能上传图片,这个没办法解决。我们最后换成用微信的js-sdk上传了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏