搜索
首页后端开发php教程javascript - h5多张图片上传,在移动端的解决方法?

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

这是html代码

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

这是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="/static/imghwm/default1.png"  data-src="' class="lazy"><span class="DelInput"></span>';
                    div = document.createElement('div');
                    div.innerHTML = result;
                    document.getElementById('PicUpload').appendChild(div);
           }
            }
        }
    }</this.files.length></code>

回复内容:

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

这是html代码

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

这是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="/static/imghwm/default1.png"  data-src="' class="lazy"><span class="DelInput"></span>';
                    div = document.createElement('div');
                    div.innerHTML = result;
                    document.getElementById('PicUpload').appendChild(div);
           }
            }
        }
    }</this.files.length></code>

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

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

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

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

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
PHP依赖注入容器:快速启动PHP依赖注入容器:快速启动May 13, 2025 am 12:11 AM

aphpdepentioncontiveContainerIsatoolThatManagesClassDeptions,增强codemodocultion,可验证性和Maintainability.itactsasaceCentralHubForeatingingIndections,因此reducingTightCightTightCoupOulplingIndeSingantInting。

PHP中的依赖注入与服务定位器PHP中的依赖注入与服务定位器May 13, 2025 am 12:10 AM

选择DependencyInjection(DI)用于大型应用,ServiceLocator适合小型项目或原型。1)DI通过构造函数注入依赖,提高代码的测试性和模块化。2)ServiceLocator通过中心注册获取服务,方便但可能导致代码耦合度增加。

PHP性能优化策略。PHP性能优化策略。May 13, 2025 am 12:06 AM

phpapplicationscanbeoptimizedForsPeedAndeffificeby:1)启用cacheInphp.ini,2)使用preparedStatatementSwithPdoforDatabasequesies,3)3)替换loopswitharray_filtaray_filteraray_maparray_mapfordataprocrocessing,4)conformentnginxasaseproxy,5)

PHP电子邮件验证:确保正确发送电子邮件PHP电子邮件验证:确保正确发送电子邮件May 13, 2025 am 12:06 AM

phpemailvalidation invoLvesthreesteps:1)格式化进行regulareXpressecthemailFormat; 2)dnsvalidationtoshethedomainhasavalidmxrecord; 3)

如何使PHP应用程序更快如何使PHP应用程序更快May 12, 2025 am 12:12 AM

tomakephpapplicationsfaster,关注台词:1)useopcodeCachingLikeLikeLikeLikeLikePachetoStorePreciledScompiledScriptbyTecode.2)MinimimiedAtabaseSqueriSegrieSqueriSegeriSybysequeryCachingandeffeftExting.3)Leveragephp7 leveragephp7 leveragephp7 leveragephpphp7功能forbettercodeefficy.4)

PHP性能优化清单:立即提高速度PHP性能优化清单:立即提高速度May 12, 2025 am 12:07 AM

到ImprovephPapplicationspeed,关注台词:1)启用opcodeCachingwithapCutoredUcescriptexecutiontime.2)实现databasequerycachingusingpdotominiminimizedatabasehits.3)usehttp/2tomultiplexrequlexrequestsandredececonnection.4 limitsclection.4.4

PHP依赖注入:提高代码可检验性PHP依赖注入:提高代码可检验性May 12, 2025 am 12:03 AM

依赖注入(DI)通过显式传递依赖关系,显着提升了PHP代码的可测试性。 1)DI解耦类与具体实现,使测试和维护更灵活。 2)三种类型中,构造函数注入明确表达依赖,保持状态一致。 3)使用DI容器管理复杂依赖,提升代码质量和开发效率。

PHP性能优化:数据库查询优化PHP性能优化:数据库查询优化May 12, 2025 am 12:02 AM

databasequeryOptimizationinphpinvolVolVOLVESEVERSEVERSTRATEMIESOENHANCEPERANCE.1)SELECTONLYNLYNESSERSAYCOLUMNSTORMONTOUMTOUNSOUDSATATATATATATATATATATRANSFER.3)

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

功能强大的PHP集成开发环境