js实现上传图片及时预览

关于“js实现上传图片及时预览”的攻略，在以下几个方面进行详细讲解：

HTML代码：首先在HTML代码中需要有一个input文件选择器，同时定义好用于预览图片的标签。如下所示：

<input type="file" accept="image/*" onchange="showPreview(event)">
<img id="previewHolder" src="" style="max-height:200px;">

其中，input标签的type为file，表示选择的是文件，accept属性指定了只能选择是图片类型。另外，onchange属性是图片上传后的事件，会触发showPreview()函数。img标签是用于显示预览图片的元素，初始时src为空，预览时将src指定为上传的文件路径即可。

JS代码：新建一个函数showPreview，该函数接收一个event事件参数。在函数内部需要判断上传的文件是否是图片格式，如果是则将其转换为URL地址，并设置到预览标签的src属性中。如下所示：

function showPreview(event) {
    const file = event.target.files[0];
    if (file.type.match(/image.*/)) {
        const reader = new FileReader();
        reader.onload = function (event) {
            document.getElementById("previewHolder").src = event.target.result;
        };
        reader.readAsDataURL(file);
    } else {
        alert("请选择一张图片！");
    }
}

示例说明：下面举两个示例说明如何实现上传图片及时预览。

（1）示例1 - 简单实现

以下是一个简单的实例，只用了最基本的HTML和JS代码：

<!DOCTYPE html>
<html>
  <head>
    <title>图片上传及时预览</title>
    <meta charset="UTF-8">
    <script type="text/javascript">
      function showPreview(event) {
        const file = event.target.files[0];
        if (file.type.match(/image.*/)) {
          const reader = new FileReader();
          reader.onload = function(event) {
            document.getElementById("previewHolder").src = event.target.result;
          };
          reader.readAsDataURL(file);
        } else {
          alert("请选择一张图片！");
        }
      }
    </script>
  </head>
  <body>
    <h2>图片上传及时预览 - 简单实现</h2>
    <input type="file" accept="image/*" onchange="showPreview(event)">
    <img id="previewHolder" src="" style="max-height:200px;">
  </body>
</html>

（2）示例2 - 添加样式及更换图片

以下是一个稍微复杂一些的实例，增加了样式和更换图片的功能。

<!DOCTYPE html>
<html>
  <head>
    <title>图片上传及时预览 - 增加样式和更换图片</title>
    <meta charset="UTF-8">
    <style>
      body {
        font-family: Arial, Helvetica, sans-serif;
      }
      h2 {
        margin-top: 20px;
        margin-bottom: 20px;
      }
      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .upload-area {
        position: relative;
        width: 300px;
        height: 200px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 200px;
        cursor: pointer;
      }
      .upload-area:hover {
        background-color: #f2f2f2;
      }
      #previewHolder {
        max-width: 300px;
        max-height: 200px;
        margin-top: 20px;
      }
      .upload-btn {
        margin-top: 20px;
        padding: 8px 20px;
        background-color: #4CAF50;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }
      .upload-btn:hover {
        opacity: 0.8;
      }
    </style>
    <script type="text/javascript">
      function showPreview(event) {
        const file = event.target.files[0];
        if (file.type.match(/image.*/)) {
          const reader = new FileReader();
          reader.onload = function(event) {
            document.getElementById("previewHolder").src = event.target.result;
          };
          reader.readAsDataURL(file);
        } else {
          alert("请选择一张图片！");
        }
      }
      function changeImage() {
        document.getElementById("input-file").value = "";
        document.getElementById("previewHolder").src = "";
      }
    </script>
  </head>
  <body>
    <div class="container">
      <h2>图片上传及时预览 - 增加样式和更换图片</h2>
      <div class="upload-area">
        <input type="file" accept="image/*" onchange="showPreview(event)" id="input-file" style="display:none;" />
        <label for="input-file">选择图片</label>
      </div>
      <img id="previewHolder" src="" alt="预览区域">
      <button class="upload-btn" onclick="changeImage()">更换图片</button>
    </div>
  </body>
</html>

以上就是关于“js实现上传图片及时预览”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现上传图片及时预览 - Python技术站

js实现上传图片及时预览

相关文章