javascript - How to upload multiple h5 images on the mobile side?-PHP Tutorial-php.cn

javascript - How to upload multiple h5 images on the mobile side?

WBOY

Release： 2016-07-06 13:52:53

Original

1388 people have browsed it

In my recent project, I want to create a voting function on the WeChat side, which involves uploading multiple images. I found a way to use FileReader to make it. It ran normally when tested on the PC side, but I encountered various pitfalls on the WeChat side. Please help. Answer, the following are my questions and the problems encountered by the code
:
1. I can’t select multiple selections on the Android side
2. I can select multiple selections on the ios side, but it will get stuck. The error message is the "return alert("The format of the uploaded image is incorrect, please select again")" in the following code,

This is the html code

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

Copy after login

This is js code

<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;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);
    　　　　　　　}
            }
        }
    }</code>

Copy after login

Reply content:

This is the html code

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

Copy after login

This is js code

<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;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);
    　　　　　　　}
            }
        }
    }</code>

Copy after login

You can use WeChat’s image upload interface on WeChat...

Our original project was implemented with ajaxfileupload, which should be no problem on WeChat. If it is a native hybrid architecture, some models such as Xiaomi do not support it.

PS: I seem to have misunderstood the question. It requires selecting multiple pictures at the same time. I thought it meant selecting multiple pictures multiple times. Please ignore the question.

Android does not support multi-image selection. I have encountered this pitfall before.