html图片上传(html图片上传删除：代码示例)

温馨提示：这篇文章已超过241天没有更新，请注意相关的内容是否还可用！

HTML图片上传可以通过使用input标签的type属性为file来实现。当用户选择图片文件后，可以通过JavaScript代码将图片显示在页面上，并且可以选择删除已上传的图片。

我们需要在HTML中添加一个input标签，设置其type属性为file，以便用户可以选择图片文件。然后，我们可以使用JavaScript来监听input标签的change事件，当用户选择了图片文件后，可以通过FileReader对象将图片文件读取为DataURL，然后将DataURL赋值给一个img标签的src属性，从而在页面上显示图片。

示例代码如下所示：


<input type="file" id="uploadInput">
<script>
  document.getElementById('uploadInput').addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;
      document.body.appendChild(img);
    }
    reader.readAsDataURL(file);
  });
</script>

在示例代码中，我们首先获取到id为uploadInput的input标签，并添加了一个change事件监听器。当用户选择了图片文件后，change事件会触发，并执行对应的回调函数。

在回调函数中，我们首先获取到用户选择的图片文件，然后创建了一个FileReader对象。接下来，我们为FileReader对象的onload事件绑定了一个回调函数。当图片文件读取完成后，onload事件会触发，并将读取到的图片数据作为参数传递给回调函数。

在回调函数中，我们创建了一个img标签，并将读取到的图片数据赋值给img标签的src属性，从而在页面上显示图片。我们将img标签添加到页面的body元素中。

这样，当用户选择了图片文件后，就可以将图片显示在页面上了。如果需要删除已上传的图片，可以通过JavaScript代码来实现。可以为每个图片添加一个删除按钮，并为删除按钮绑定一个点击事件，点击按钮时可以移除对应的图片元素。

示例代码如下所示：


<input type="file" id="uploadInput">
<div id="imagesContainer"></div>
<script>
  document.getElementById('uploadInput').addEventListener('change', function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = document.createElement('img');
      img.src = e.target.result;
      var deleteBtn = document.createElement('button');
      deleteBtn.textContent = '删除';
      deleteBtn.addEventListener('click', function() {
        img.parentNode.removeChild(img);
        deleteBtn.parentNode.removeChild(deleteBtn);
      });
      document.getElementById('imagesContainer').appendChild(img);
      document.getElementById('imagesContainer').appendChild(deleteBtn);
    }
    reader.readAsDataURL(file);
  });
</script>