javascript - h5多张图片上传，在移动端的解决方法?

问题描述

问 题

最近项目里要做一个微信端的投票功能，里面涉及到多图上传，我想办法用FileReader做出来了，在pc端测试的时候正常运行，但是在微信端遇到了各种坑，求解答，下面是我的问题和代码
遇到的问题：
1、在安卓端的时候多选选不上
2、在ios端的时候多选选上了，但是会卡在错误提示那里，就是下面代码的return alert("上传的图片格式不正确，请重新选择")，

这是html代码

<div class="AddInpnt fl">
    <input type="file" class="File" id="file_input" multiple/>
</div>

这是js代码

    window.onload = function(){
        var input = document.getElementById("file_input");
        var result,div;
 
        if(typeof FileReader==='undefined'){
            result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }　　　　
        function readFile(){
            for(var i=0;i<this.files.length;i++){
                if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　
                    return alert("上传的图片格式不正确，请重新选择")
　　　　　　　　　}
                var reader = new FileReader();
                
                reader.readAsDataURL(this.files[i]);
                reader.onload = function(e){
                    result = '<div class="PicInput fl" id="PicInput"><img src="'+this.result+'"><span class="DelInput"></span></div>';
                    div = document.createElement('div');
                    div.innerHTML = result;
                    document.getElementById('PicUpload').appendChild(div);
    　　　　　　　}
            }
        }
    }

解决方案

微信端可以使用微信的上传图片接口...

这篇关于javascript - h5多张图片上传，在移动端的解决方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！