Rumah > pembangunan bahagian belakang > tutorial php > javascript - h5多张图片上传,在移动端的解决方法?

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

WBOY
Lepaskan: 2016-07-06 13:52:53
asal
1384 orang telah melayarinya

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

这是html代码

<code><div class="AddInpnt fl">
    <input type="file" class="File" id="file_input" multiple>
</div></code>
Salin selepas log masuk
Salin selepas log masuk

这是js代码

<code>    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 if return alert var reader="new" filereader reader.readasdataurl reader.onload="function(e){" result='<div class="PicInput fl" id="PicInput"><img src="'><span class="DelInput"></span>';
                    div = document.createElement('div');
                    div.innerHTML = result;
                    document.getElementById('PicUpload').appendChild(div);
           }
            }
        }
    }</this.files.length></code>
Salin selepas log masuk
Salin selepas log masuk

回复内容:

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

这是html代码

<code><div class="AddInpnt fl">
    <input type="file" class="File" id="file_input" multiple>
</div></code>
Salin selepas log masuk
Salin selepas log masuk

这是js代码

<code>    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 if return alert var reader="new" filereader reader.readasdataurl reader.onload="function(e){" result='<div class="PicInput fl" id="PicInput"><img src="'><span class="DelInput"></span>';
                    div = document.createElement('div');
                    div.innerHTML = result;
                    document.getElementById('PicUpload').appendChild(div);
           }
            }
        }
    }</this.files.length></code>
Salin selepas log masuk
Salin selepas log masuk

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

我们原来项目有用ajaxfileupload实现,在微信端应该是没问题的,如果是原生混合架构的话,部分机型比如小米是不支持的。

PS:我貌似看错题目了,是要同时多选图片,我以为是多次选择多张,题主忽略吧。

安卓是不支持多图选择的,这个坑以前踩过。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan