移动端实现多张图片上传

下面是我在项目中用到的上传三张图片的代码，项目中遇到的，所有写了一个demo，还可以。不过这里没有用压缩，具体压缩图片代码之后博客中再写。如果有什么问题还请提出来。

pmjt.jpg

• HTML代码

<div id="head-bar">
    <div class="head-bar">
        <div class="head-bar-back">
            <a href="javascript:Dback('index.php');" data-direction="reverse"><img src="static/img/icon-back.png" width="24" height="24" /></a>
        </div>
        <div class="head-bar-title">举报</div>
    </div>
    <div class="head-bar-fix"></div>
</div>
<div class="main">
    <div class="report_content">
        <form action="report_content.php?itemid={$itemid}&action={$action}" method="post" id="" class="" target="_self" enctype="multipart/form-data" onsubmit="return check();">
            <div class="wrap">
                <textarea name="report_c" rows="" cols="" id="content" value="" placeholder="请输入举报内容"></textarea>   
                <div class="img_upload">
                    <p class="i_title">证据截图</p>
                    <div id='image-list' class="row image-list"> </div>             
                </div>
            </div>
            <input type="submit" value="提     交" class="submit_btn" name="submit" id="submit" />
        </form>
    </div>
</div>

• CSS代码

.report{}
.report ul {background: #FFFFFF;width: 100%;}
.report ul li {line-height: 1.1rem;width: 100%;border-bottom: 1px solid #DDDDDD;}
.report ul li a{display: block;padding: 0rem 0.3rem;color: #333333;font-size: 0.3rem;}
.report ul li a:after{content: "";display: block;width: 0.5rem;height: 1.1rem;background: url(../img/icon-font.png) no-repeat;background-size: 0.5rem 0.5rem;background-position: center;float: right;}

.report_content .submit_btn{display: block;width: 6.7rem;height: 0.8rem;color: #FFFFFF;font-size: 0.3rem; border-radius: 0.1rem;line-height: 0.8rem;border: none;outline: none; margin:auto;background: url(../m/project_btn.png) no-repeat;background-size: 100% 100%;overflow: hidden;margin-top: 0.9rem;}
.report_content .wrap{padding: 0.2rem;width: 6.5rem;margin: auto;background: #FFFFFF;box-shadow: 0px 0px 8px rgba(0,0,0,.1);margin-top: 0.2rem;border-radius: 0.2rem;}
.report_content .wrap textarea{width: 100%;height: 4rem;margin-top: 0.2rem;border: none;resize: none;}
.report_content .img_upload{border-top: 1px solid #DDDDDD;height: 3rem;}

.report_content .i_title{color: #333333;font-size: 0.24rem;}
.report_content .i_title:after{content: "（最多上传三张，可不上传）";color: #B2B2B2;margin-left: 0.2rem;}
.report_content .img_upload{}
.report_content .img_upload .upload_box{width: 1.35rem;height: 1.35rem; display: inline-block;vertical-align: top;margin-right: 0.3rem; background: url(../m/paotui_project_icon.png) no-repeat;background-size: 3.9rem 6.4rem;background-position: -0.2rem -4.6rem;}

.report_content .img_upload .img-list li{width: 1.35rem;height: 1.35rem;display: inline-block;vertical-align: top;margin-right: 0.3rem;overflow: hidden;}


.image-list { width: 100%; height: 1.5rem; background-size: cover; padding: 0.1rem 0.1rem; overflow: hidden; }
.image-item.space { border: none; }
.image-item { width: 1.32rem; height: 1.32rem; background-image: url(../m/upload.png); background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; position: relative; border-radius: 5px; margin-right: 10px; margin-bottom: 10px; border: solid 1px #e8e8e8; }
.image-item.space .image-close { display: none; }

.image-item .image-close { position: absolute; display: inline-block; right: -6px; top: -6px; width: 20px; height: 20px; text-align: center; line-height: 20px; border-radius: 12px; background-color: #FF5053; color: #f3f3f3; border: solid 1px #FF5053; font-size: 9px; font-weight: 200; z-index: 1; }
.image-item input[type="file"] { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 0; }

• JS代码

(function(window, document, undefined) {
    var get = function(id) {
        return document.getElementById(id);
    };
    var qsa = function(sel) {
        return [].slice.call(document.querySelectorAll(sel));
    };
    var ui = {
        content:get('content'),
        imageList: get('image-list'),
        submit: get('submit')
    };

    ui.clearForm = function() {
        ui.content.value = '';
        ui.imageList.innerHTML = '';
        ui.newPlaceholder();
    };
    ui.getFileInputArray = function() {
        return [].slice.call(ui.imageList.querySelectorAll('input[type="file"]'));
    };
    ui.getFileInputIdArray = function() {
        var fileInputArray = ui.getFileInputArray();
        var idArray = [];
        fileInputArray.forEach(function(fileInput) {
            if (fileInput.value != '') {
                idArray.push(fileInput.getAttribute('id'));
            }
        });
        return idArray;
    };
    var imageIndexIdNum = 0;
    ui.newPlaceholder = function() {
        var fileInputArray = ui.getFileInputArray();
        if (fileInputArray &&
            fileInputArray.length > 0 &&
            fileInputArray[fileInputArray.length - 1].parentNode.classList.contains('space')) {
            return;
        }
        imageIndexIdNum++;
        var placeholder = document.createElement('div');
        placeholder.setAttribute('class', 'image-item space');
        var closeButton = document.createElement('div');
        closeButton.setAttribute('class', 'image-close');
        closeButton.innerHTML = 'X';
        closeButton.addEventListener('click', function(event) {
            var _target = this.nextSibling;
            //获取到删除的是第几张图
            var _index = _target.getAttribute('name').slice(5);
            
            var thumb1 = document.getElementById('image-1')?document.getElementById('image-1'):0;
            var thumb2 = document.getElementById('image-2')?document.getElementById('image-2'):0;
            var thumb3 = document.getElementById('image-3')?document.getElementById('image-3'):0;
            switch (_index){
                case '1':
                        if (thumb3!=0) {
                            thumb2.setAttribute('id','image-1');
                            thumb2.setAttribute('name','thumb1');
                            thumb3.setAttribute('id','image-2');
                            thumb3.setAttribute('name','thumb2');
                            imageIndexIdNum = 2;
                        }else if(thumb2!=0&&thumb3==0){
                            thumb2.setAttribute('id','image-1');
                            thumb2.setAttribute('name','thumb1');
                            imageIndexIdNum = 1;
                        }else{
                            imageIndexIdNum = 0;
                        }
                        
                    break;
                case '2':
                        if (thumb3!=0) {
                            thumb3.setAttribute('id','image-2');
                            thumb3.setAttribute('name','thumb2');
                            imageIndexIdNum = 2;
                        }else if(thumb2!=0&&thumb3==0){
                            imageIndexIdNum = 1;
                        }else{
                            imageIndexIdNum = 0;
                        }
                    break;
                case '3':
                        imageIndexIdNum = 2;
                    break;
                default:
                    break;
            }
            
            ui.newPlaceholder();
            event.stopPropagation();
            event.cancelBubble = true;
            setTimeout(function() {
                ui.imageList.removeChild(placeholder);
            }, 0);
            return false;
        }, false);
        
        var fileInput = document.createElement('input');
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute('name', 'thumb' + imageIndexIdNum);
        fileInput.setAttribute('accept', 'image/*');
        fileInput.setAttribute('id', 'image-' + imageIndexIdNum);
        fileInput.addEventListener('change', function(event) {
            var file = fileInput.files[0];
            if (parseInt(file.size) > 3145728) {
                Dtoast("图片大小不能超过3M");
                return false;
            }
            if (file) {
                var reader = new FileReader();
                reader.onload = function() {
                    //处理 android 4.1 兼容问题
                    var base64 = reader.result.split(',')[1];
                    var dataUrl = 'data:image/png;base64,' + base64;
                    //
                    placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
                }
                reader.readAsDataURL(file);
                placeholder.classList.remove('space');
                var len = document.getElementsByClassName('image-item').length;
                
                if (len == 3) {
                    return false;
                }else{
                    ui.newPlaceholder();                    
                }
            }
        }, false);
        placeholder.appendChild(closeButton);
        placeholder.appendChild(fileInput);
        ui.imageList.appendChild(placeholder);      
    };
    ui.newPlaceholder();
})(window, document, undefined);