纯JS实现多图片上传（在layui框架中）

HTML代码

<form id="form1" class="layui-form layui-form-pane" action="{:url('')}" enctype="multipart/form-data">

    <div class='layui-form-item'>
                                    <label class="layui-form-label">游戏截图</label>
                                    <div class='layui-input-block'>
                                        <div class='layui-box layui-upload-button'>
                                            <input type='file'  id='picsInput' name='picsInput' multiple='multiple' onchange='getPicture(this)'>
                                            <input type='hidden' id='pics' name='thumb3' value='{$info.thumb3|default=""}'>
                                            <span class='layui-upload-icon'><i class='layui-icon'></i>选择图片</span>
                                        </div>
                                        <input type='button' class='layui-btn layui-btn-normal' onclick='do_upload()' value='立即上传'/>
                                        <div id='showimg'>
                                            {volist name="thumb3_arr" id="vo"}
                                            <img src="{$vo}" class="img-thumbnail"  />
                                            {/volist}
                                        </div>
                                    </div>
                                </div>
                                        
</form>

 

<script type = 'text/javascript' >
    var layer, tbl_img = document.getElementById('showimg'),
        imgObjs = {};
    layui.use(['layer', 'form'],
        function() {
            layer = layui.layer;
            var form = layui.form();
        });
    function getPicture(obj) {
        var imgs = obj.files;
        tbl_img.innerHTML = '';
        for (var i = 0; i < imgs.length; i++) {
            if (!imgs[i]) return;
            if (! (imgs[i].type.indexOf('image') == 0 && imgs[i].type && /\.(?:jpg|png|gif)$/.test(imgs[i].name))) {
                layer.msg('图片只能是jpg,gif,png');
                return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(imgs[i]);
            reader.onload = function(e){
                tbl_img.innerHTML += '<img src='+this.result+' alt="" class="not_upload" />'
            }
        }
        imgObjs = obj.files;
    }

    function do_upload() {
        var imgsxxx = new Array();
        tbl_img.innerHTML = '';
        layui.use(['jquery'], function(){
            var $ = layui.jquery //重点处
            for(var i = 0, ilen = imgObjs.length; i < ilen; i++) {
                var file = imgObjs[i];
                var formdata = new FormData();
                // 上传到服务器的字段名称
                formdata.append('files', file);
                $.ajax({
                    type: 'post',
                    url: "/kbcms/admin_upload/upload",
                    data: formdata,
                    cache: false,
                    async:false,
                    processData: false,
                    contentType: false,
                    dataType:'json'
                }).success(function (data) {
                    var tmp = JSON.parse(data);
                    imgsxxx.push(tmp.url);
                    tbl_img.innerHTML += '<img src='+ tmp.url +' alt="" class="img-thumbnail" />'
                }).error(function () {
                    alert("上传失败");
                });
            }
            var str = JSON.stringify( imgsxxx );
            $('#pics').val(str);
            layer.msg('上传成功！');
        });
    }
</script>
<style>
    #showimg{}
    #showimg img { width: 120px; height: auto; }
    #showimg .not_upload { border: 1px #0c9076 solid; padding: 4px; margin: 4px;}
</style>