Home >Backend Development >PHP Tutorial >javascript - How to upload multiple h5 images on the mobile side?

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

WBOY
WBOYOriginal
2016-07-06 13:52:531382browse

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>

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>

Reply content:

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>

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>

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.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn