基于JS与PHP的电商多图上传自定义排序方案优化咨询

我需要为电商网站实现多图上传功能，同时支持自定义图片后续的展示顺序，目前已构思出一套可行方案，但想咨询是否存在更优的实现方式。默认限制最多上传3张图片。

现有实现流程 #

• 使用单个input控件支持多选图片
• 生成图片预览并通过SortableJS实现拖拽排序
• 用隐藏输入框存储图片排序数据
• 后端将图片存储到文件系统
• 将图片路径与对应排序索引存入数据库，前端展示时按排序索引调取

前端代码实现 #

HTML代码 #

<!-- 单input支持多选图片 -->
<input type="file" name="images[]" onchange="previewImages(this)" multiple>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<!-- 该容器用于绑定SortableJS实现拖拽排序 -->
<div id="preview-parent">
  <div class="preview">
    <!-- 隐藏输入框存储图片排序，格式为images_order[图片名] = 排序索引 -->
    <input class="order-input" type="hidden" name="images_order[]" value="0">
    <!-- 图片预览元素 -->
    <img class="preview-image" src="" alt="Image1">
  </div>
  <div class="preview">
    <input class="order-input" type="hidden" name="images_order[]" value="1">
    <img class="preview-image" src="" alt="Image2">
  </div>
  <div class="preview">
    <input class="order-input" type="hidden" name="images_order[]" value="2">
    <img class="preview-image" src="" alt="Image3">
  </div>
</div>

JavaScript代码 #

function previewImages(input) {
    var file = input.files
    // 遍历选中的图片生成预览
    for (var i = 0; i < file.length; i++) {
        let preview = document.querySelectorAll('.preview-image')[i]
        let reader  = new FileReader()

        reader.onloadend = function () {
            preview.src = reader.result
        }

        if (file[i]) {
            reader.readAsDataURL(file[i])
            // 将图片名写入隐藏输入框的name属性
            let order_inputs = document.querySelectorAll('.order-input')
            order_inputs[i].name = 'images_order[' + file[i].name +']'
        } else {
            preview.src = ""
        }
    }
}

// 初始化拖拽排序
var el = document.getElementById('preview-parent')
new Sortable(el, {
    animation: 150,
    // 拖拽结束后更新所有隐藏输入框的排序值
    onEnd: function (event) {
        let order_inputs = document.querySelectorAll('.order-input')
        for (var i = 0; i < order_inputs.length; i++) {
            order_inputs[i].value = [i]
        }
    }
})

样式代码（CSS） #

#preview-parent {
  display: flex;
  gap: 1rem;
  margin: 1rem;
}
.preview {
  height: 100px;
  width: 100px;
  padding: 1rem;
  border: 1px solid grey;
}
.preview img {
  max-height: 100%;
  max-width: 100%;
}

后端代码实现（PHP + CodeIgniter 4） #

后端逻辑为：新增商品后获取生成的商品ID，将上传的图片按商品ID分目录存储，同时将图片访问路径、对应排序索引、关联商品ID存入数据库，用户访问商品详情页时按排序索引拉取图片展示即可。控制器核心代码如下：

// 新增商品后获取生成的商品ID
$product_id = $this->products->insertID();
$input = $this->request->getPost();

// 批量处理上传的图片
if($imagefile = $this->request->getFiles())
{
    foreach($imagefile['images'] as $img)
    {
        if ($img->isValid() && ! $img->hasMoved())
        {
            // 存储图片到对应商品目录
            $name = $img->getName();
            $img->move('assets/images/'.$product_id, $name);

            // 写入图片信息到数据库
            $data = [
                'product_id'    => $product_id,
                'path'          => base_url('assets/images/'.$product_id.'/'.$name),
                'order_index'   => $input['images_order'][$name],
            ];
            
            $this->imagesModel->insert($data);
        }
    }
}

需求说明 #

目前暂未实现上传图片数量限制的功能，已有相关参考资料后续可补充开发。最终希望实现多图批量上传，除支持拖拽排序外还可替换单张图片，求相关优化方案及实现思路。

内容的提问来源于stack exchange，提问作者Ivan Beliakov