文件上传按钮和显示文件javascript

本文将介绍如何在网页中添加文件上传按钮和显示上传的文件的javascript代码。

文件上传按钮

文件上传按钮可以让用户将文件上传到服务器。下面是实现文件上传按钮的基本步骤：

1. 添加一个input元素，并将type属性设置为file，这样用户就可以选择需要上传的文件。

<input type="file" name="fileToUpload" id="fileToUpload">

2. 在用户选择文件后，使用JavaScript监听input元素的change事件。

document.getElementById("fileToUpload").addEventListener("change", function() {
  // 文件已选择
});

3. 在change事件的处理程序中，获取选择的文件并将其上传到服务器。

var file = document.getElementById("fileToUpload").files[0];
var formData = new FormData();
formData.append("fileToUpload", file);

var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php");
xhr.send(formData);

完整的文件上传代码如下：

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload" name="submit">
</form>

<script>
  document.getElementById("fileToUpload").addEventListener("change", function() {
    var file = document.getElementById("fileToUpload").files[0];
    var formData = new FormData();
    formData.append("fileToUpload", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php");
    xhr.send(formData);
  });
</script>

显示文件

在文件上传成功后，我们可以将上传的文件在网页中显示出来。下面是实现显示文件的基本步骤：

1. 首先需要在上传文件成功后，从服务器获取文件的URL。

var fileUrl = xhr.responseText;

2. 创建一个img元素，并将src属性设置为获取到的文件URL。

var img = document.createElement("img");
img.src = fileUrl;

3. 将img元素添加到网页中。

document.getElementById("imageContainer").appendChild(img);

完整的文件上传和显示代码如下：

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload" name="submit">
</form>

<div id="imageContainer"></div>

<script>
  document.getElementById("fileToUpload").addEventListener("change", function() {
    var file = document.getElementById("fileToUpload").files[0];
    var formData = new FormData();
    formData.append("fileToUpload", file);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.php");
    xhr.onload = function() {
      if (xhr.status === 200) {
        var fileUrl = xhr.responseText;
        var img = document.createElement("img");
        img.src = fileUrl;
        document.getElementById("imageContainer").appendChild(img);
      }
    };
    xhr.send(formData);
  });
</script>

以上就是文件上传按钮和显示文件的javascript代码。我们可以根据需要进行修改和扩展。