jquery选择图片上传代码

原创

mob64ca12f86e32 2024-01-11 08:34:32 ©著作权

文章标签 选择图片 jQuery 上传 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f86e32的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery选择图片上传代码

在前端开发中，我们经常会遇到需要上传图片的需求。而使用jQuery可以方便地选择图片并将其上传到服务器。本文将通过一个简单的示例来介绍如何使用jQuery选择图片上传。

示例代码

首先，我们需要在HTML中添加一个用于显示选择的图片的元素和一个按钮用于选择图片。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery选择图片上传示例</title>
  <script src="
  <style>
    #image-preview {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      background-position: center center;
      background-size: cover;
    }
  </style>
</head>
<body>
  <h2>选择图片并上传</h2>
  <input type="file" id="image-upload" accept="image/*" style="display:none;">
  <button id="upload-button">选择图片</button>
  <div id="image-preview"></div>
</body>
</html>

在这段代码中，我们添加了一个隐藏的文件输入框和一个显示预览图片的<div>元素。

接下来，我们使用jQuery来实现选择图片并预览的功能。代码如下：

$(document).ready(function() {
  $('#upload-button').click(function() {
    $('#image-upload').click();
  });

  $('#image-upload').change(function() {
    var file = $(this)[0].files[0];
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#image-preview').css('background-image', 'url(' + e.target.result + ')');
    }

    reader.readAsDataURL(file);
  });
});

在这段代码中，我们通过jQuery选择了上传按钮和文件输入框，并为上传按钮添加了点击事件，在点击按钮时触发文件输入框的点击事件。当文件输入框的内容发生变化时，我们通过FileReader对象读取选择的图片文件，并将其转换为Base64编码的数据URL。最后，我们将预览图片的<div>元素的背景图设置为读取到的数据URL。

效果演示

下面是通过该代码实现的选择图片上传的效果演示：

sequenceDiagram
    participant User
    participant Browser
    participant Server

    User->>Browser: 打开网页
    Browser->>User: 显示网页内容
    User->>Browser: 点击选择图片按钮
    Browser->>User: 弹出文件选择对话框
    User->>Browser: 选择一个图片文件
    Browser->>Server: 上传图片文件
    Server->>Browser: 返回图片URL
    Browser->>User: 显示预览图片