JavaScript多图片上传案例

动态上传多张图片实例——让上传更灵活

在这个例子中，我们将实现一个动态上传多张图片的JavaScript功能。不再限制用户一次只能上传固定数量的图片，而是让用户决定上传图片的个数，动态地创建上传图片文框和按钮。

让我们构建一个基础的HTML页面结构。页面中包含一个表单和两个单选按钮，用于选择是否上传图片以及选择上传图片的数量。还有一个用于显示上传按钮和输入框的区域。

当选中“有”单选按钮时，将显示一个输入框和一个按钮，用户可以在输入框中输入希望上传的图片数量，然后点击按钮动态创建相应数量的上传图片文框和按钮。

HTML部分：

```html

```

JavaScript部分：

```javascript

function createUploadBoxes() {

var num = parseInt(document.getElementById('numImages').value); // 获取用户希望上传的图片数量

if (isNaN(num) || num < 1 || num > 10) { // 限制最多上传10张图片，确保输入的是数字格式正确

alert('请输入有效的图片数量（不超过10张）');

return; // 如果输入无效则退出函数，不执行后续操作

}

var uploadArea = document.getElementById('uploadArea'); // 获取上传区域元素引用

uploadArea.style.display = 'none'; // 隐藏上传区域（可选操作）以便重新生成新的表单元素和内容布局调整等。根据实际情况决定是否使用。