静态html js文件上传,js实现动态添加上传文件页面

要实现静态 HTML 文件上传，可以使用 HTML5 中的文件上传 API。具体实现步骤如下：

1. 创建一个 HTML 表单，包含一个文件输入框和一个提交按钮。

<form>
  <input type="file" name="file">
  <button type="submit">上传</button>
</form>

2. 给表单绑定一个提交事件，阻止默认提交行为，获取文件数据并发送给服务器。

<script>
  var form = document.querySelector('form');
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    var file = form.querySelector('input[type=file]').files[0];
    var formData = new FormData();
    formData.append('file', file);
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');
    xhr.send(formData);
  });
</script>

这样就可以实现一个简单的文件上传页面。如果想要动态添加上传文件页面，可以使用 JavaScript 动态创建 HTML 元素。具体实现步骤如下：

1. 创建一个容器元素，用于存放上传表单。

<div id="upload-container"></div>

2. 创建一个按钮元素，用于触发添加上传表单操作。

<button id="add-upload-form">添加上传表单</button>

3. 给按钮绑定一个点击事件，创建一个上传表单并添加到容器中。

<script>
  var container = document.getElementById('upload-container');
  var addButton = document.getElementById('add-upload-form');
  addButton.addEventListener('click', function() {
    var form = document.createElement('form');
    var input = document.createElement('input');
    var submit = document.createElement('button');
    form.appendChild(input);
    form.appendChild(submit);
    container.appendChild(form);
  });
</script>

这样就可以每次点击按钮都动态添加一个上传表单了。当然，还需要给上传表单绑定提交事件，参考上面的步骤即可。