TP5+bootstrap管理后台,多张图片上传应用

最新推荐文章于 2022-02-17 15:39:45 发布

置顶

舞步天行者

最新推荐文章于 2022-02-17 15:39:45 发布

阅读量1.2k

点赞数 1

文章标签： PHP TP5 多图片上传代码实例 bootstrap bootstrap

本文链接：https://blog.csdn.net/weixin_37616043/article/details/88560706

版权

TP5+bootstrap管理后台,多张图片上传应用

最近项目管理后台要整改，这过程遇到多张图片上传，查了很多资料，都是晕了，后来找到解决方案。以下代码已测试成功；

1、首先，商品上传多张图片，不能和商品其他信息一起表单提交。那么只能用jQuery来提交，但是jQuery的$.post{}和$.ajax提交不能提交文件（视频、图片）。那其中之一的解决方案就是用 jquery.form.js 提交表单。

2、 jquery.form.js的引用、原理、下载，我就不说了。网上很多资料。记得和jQuery.js一起引用。我用到了ajaxSubmit；

3、功能：上传多张图片可以删除，可以图片交换顺序。删除文件时是删除源文件，源文件删除前要判断是否存在，还有屏蔽错误，以免导致程序报错，无法运行；

案例如下：HTML代码：

<div class="space-4"></div>
    <div class="form-group">
        <label class="col-sm-3 control-label no-padding-right">图集</label>
        <div class="col-sm-9 upload_imgs">
            <div class="file_input col-sm-5">
                <input type="file" name="file[]" multiple="multiple" class="input-img" >
                <input type="hidden" value="" name="atlas" class="atlas_id">
            </div>
            <div class="btn-img-upload">上传</div>
            <div class="imglist">
                <ul>
                    {notempty name="info['imglist']"}
                    {volist name="$info['imglist']" id="vo"}
                    <li id="{$vo.id}">
                                <span class="edit_pic_mask">
                                    <i class="fa fa-arrow-circle-left" onclick="leftShiftImage(this)"></i>
                                    <i class="fa fa-trash" onclick="removeImaged(this)"></i>
                                    <i class="fa fa-arrow-circle-right" onclick="rightShiftImage(this)"></i>
                                </span>
                        <img src="{$vo.url}" alt="" width="100%" height="100%">
                    </li>