TP5 多图上传

最终样式

<div class="form-group">
                        <label class="col-sm-2 control-label">图片上传</label>
                        <div class="col-sm-8">
                            <div class="col-sm-12" style="padding-left:0px;">
                                <button type="button" class="btn btn-primary" onclick="addImg();">添加图片</button>
                            </div>

                            <div class="col-sm-12 imgKj"  style="padding-left:0px;">
                                <table>
                                    <tbody>
                                    {notempty name='data.content'}
                                    {foreach name="data.content" item="li" key="k"}
                                    <tr>
                                        <td>
                                            <div class="img_info">
                                                <img src="{$li.img}" id="up_{$k}">
                                                <input type="hidden" name="imgs[{$k}]" value="{$li.img}" />
                                                <input type="file" name="{$k}s" id="in_{$k}" onclick="preview(this)" accept="image/gif,image/jpeg,image/jpg,image/png">
                                            </div>
                                        </td>
                                        <td>

                                            <div class="input-group">
                                                <span class="input-group-btn"><button type="button" class="btn btn-white">链接</button></span>
                                                <input type="text" name="urls[{$k}]" value="{$li.url}" class="form-control" style="width:300px;" />
                                            </div>
                                            <div class="input-group m-b">
                                                <span class="input-group-btn"><button type="button" class="btn btn-white">排序</button></span>
                                                <input type="text" name="sorts[{$k}]" value="{$li.sort}" style="width:300px;" class="form-control">
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:void(0);" onclick="delImgKj(this);" style="margin-left:20px;" class="btn btn-danger btn-xs delete"><i class="fa fa-trash-o"></i> 删除</a>
                                        </td>
                                    </tr>
                                    {/foreach}
                                    {/notempty}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <style type="text/css">
                        .img_info{width:104px;height:auto;overflow:hidden;position:relative;margin:0 10px 10px 0;float:left;}
                        .img_info img{width:100px;height:100px;border:1px solid #ccc;padding:1px;}
                        .img_info input{width:100px;height:100px;left:0;top:0;opacity:0;position:absolute;z-index:1;cursor:pointer;padding:0;margin:0;}
                        .img_info span{display:inline-block;width:100%;height:22px;line-height:22px;text-align:center;cursor:pointer;}
                    </style>
                    <script type="text/javascript">
                        function preview(self) {
                            $(self).unbind('change').change(function (event) {
                                var self = this;
                                var files = event.target.files || event.dataTransfer.files;
                                var formData = new FormData();
                                formData.append('imgFile', files[0]);
                                $(self).prev().prev().attr('src', '__PUBLIC__/img/loading.gif');
                                var ajax = new XMLHttpRequest();
                                ajax.open("POST", "{:url('Index/saveImg')}", true);
                                ajax.send(formData);
                                ajax.onreadystatechange = function () {
                                    $(self).prev().prev().attr('src', '__PUBLIC__/img/goods.jpg');
                                    if (ajax.readyState == 4) {
                                        if (ajax.status >= 200 && ajax.status < 300 || ajax.status == 304) {
                                            var data = JSON.parse(ajax.responseText);
                                            if (data.status == 'y') {
                                                $(self).prev().val(data.data.src);
                                                $(self).prev().prev().attr('src', data.data.src);
                                            } else {
                                                layer.msg(data.info);
                                            }
                                        }
                                    }
                                }
                            });
                        }
                        function addImg(){
                            var time=new Date().getTime();

                            var length=$('.imgKj .img_info').length;
                            if(length == 10){
                                layer.msg('最多添加10张图片！');return false;
                            }

                            var html = '<tr>';
                            html += '		<td>';
                            html += '			<div class="img_info">';
                            html += '				<img src="__PUBLIC__/img/goods.jpg">';
                            html += '				<input type="hidden" name="imgs[]"/>';
                            html += '				<input type="file" οnclick="preview(this)" accept="image/gif,image/jpeg,image/jpg,image/png">';
                            html += '			</div>';
                            html += '		</td>';
                            html += '		<td>';
                            html += '			<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-white">链接</button></span><input type="text" name="urls[]" class="form-control" style="width:300px;margin-top: 0;"></div><div class="input-group m-b"><span class="input-group-btn"><button type="button" class="btn btn-white">排序</button></span><input type="number" max="9999999" name="sorts[]" style="width:300px;margin-top: 0;" class="form-control"></div>';
                            html += '		</td>';
                            html += '		<td>';
                            html += '			<a href="javascript:void(0);" οnclick="delImgKj(this);" class="btn btn-danger btn-xs delete" style="margin-left:20px;"><i class="fa fa-trash-o"></i> 删除</a>';
                            html += '		</td>';
                            html += '	</tr>';

                            $('.imgKj tbody').append(html);
                        }

                        function delImgKj(obj){
                            $(obj).parents('tr').remove();
                        }

                    </script>

-----------------------------

//轮播图
            $data['content'] = [];
            $sort = [];
            if (empty($data['imgs'][0])) {
                return $this->jsonError('请上传图片');
            }
            foreach ($data['imgs'] as $k=>$v) {
                if (!empty($v)) {
                    $data['content'][$k] = [
                        'img' => $v,
                        'url' => trim($data['urls'][$k]),
                        'sort' => intval($data['sorts'][$k])
                    ];
                    $sort[$k] = $data['sorts'][$k];
                }
            }
            array_multisort($sort, SORT_ASC, $data['content']);
            unset($data['imgs'], $data['urls'], $data['sorts']);
            $data['content'] = serialize($data['content']);
            dump($data['content']);die();