用 html 与 js 实现图片上传与图片排序模块

好的，我可以为您提供一个基本的实现思路：

1. 首先在 HTML 中创建一个文件上传按钮和一个图片展示区域，用于展示上传的图片。

<input type="file" id="file-upload">
<div id="image-container"></div>

2. 然后在 JavaScript 中监听文件上传按钮的变化事件，获取上传的图片文件。

const fileUpload = document.getElementById('file-upload');
fileUpload.addEventListener('change', function() {
  const file = fileUpload.files[0];
  // 处理上传的文件
});

3. 接着，使用 FileReader 对象将图片文件转换成 URL 地址，用于在页面中展示图片。

const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
  const imageUrl = reader.result;
  // 将图片添加到展示区域中
};

4. 实现图片排序功能可以使用拖拽操作来实现。首先为每张图片添加一个可拖拽属性，然后监听拖拽事件，根据鼠标拖拽的位置来改变图片的位置。

const images = document.querySelectorAll('.image');
images.forEach(image => {
  image.draggable = true;
  image.addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', e.target.id);
  });
});

const imageContainer = document.getElementById('image-container');
imageContainer.addEventListener('dragover', function(e) {
  e.preventDefault();
});

imageContainer.addEventListener('drop', function(e) {
  e.preventDefault();
  const imageId = e.dataTransfer.getData('text/plain');
  const draggedImage = document.getElementById(imageId);
  imageContainer.insertBefore(draggedImage, e.target);
});

以上就是一个简单的图片上传与排序模块的实现思路，具体实现的细节可以根据需求进行调整。