jQuery实现图片上传预览效果功能完整实例【测试可用】

jQuery实现图片上传预览效果功能完整实例攻略

在网页开发中,图片上传是一个经常用到的功能。为了方便用户预览刚上传的图片,我们可以使用jQuery实现图片上传预览效果。以下是具体实现步骤:

1. HTML结构

首先,我们需要在HTML中添加一个input元素,并设置type为file,以实现用户上传图片的功能。

<input type="file" id="fileInput">

同时,我们需要在HTML中设置一个div元素,用于显示上传的图片。

<div id="imgPreview">
  <img id="preview" src="">
</div>

2. jQuery实现

  1. 给input元素绑定change事件,实现当用户选择了要上传的文件时,上传的图片会自动显示在预览区。
$(document).ready(function() {
  $("#fileInput").change(function() {
    var objUrl = getObjectURL(this.files[0]); //获取文件路径
    if (objUrl) {
      $("#preview").attr("src", objUrl); //将图片路径赋值给img元素
    }
  });
});

function getObjectURL(file) {
  var url = null;
  if (window.createObjectURL != undefined) { //URL.createObjectURL()方法只有Chrome和FireFox支持
    url = window.createObjectURL(file);
  } else if (window.URL != undefined) {
    url = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    url = window.webkitURL.createObjectURL(file);
  }
  return url;
}
  1. 当用户上传的文件不是图片时,我们需要用另一张图片替代原本的预览图,以提醒用户上传文件格式不正确。
$(document).ready(function() {
  $("#fileInput").change(function() {
    var file = this.files[0];
    var objUrl = getObjectURL(file);
    if (objUrl) {
      $("#preview").attr("src", objUrl);
    } else { //替换为提示图片
      $("#preview").attr("src", "warning.jpg");
    }
  });
});

3. 完整示例

在这里,我们提供两个示例以展示jQuery实现图片上传预览效果的完整流程。

  1. 示例一:只能上传图片文件,其他文件上传会提示用户,示例代码如下:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现图片上传预览效果</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="imgPreview">
    <img id="preview" src="">
  </div>
  <script>
    $(document).ready(function() {
      $("#fileInput").change(function() {
        var file = this.files[0];
        if (file.type.indexOf("image") === 0) { //判断是否为图片类型
          var objUrl = getObjectURL(file);
          if (objUrl) {
            $("#preview").attr("src", objUrl);
          }
        } else { //提示用户上传文件类型不正确
          alert("请上传图片文件!");
        }
      });
    });
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }
  </script>
</body>
</html>
  1. 示例二:上传任意类型的文件,但不是图片文件的上传会使用预设的图片替代原本的预览图,示例代码如下:
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现图片上传预览效果</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="file" id="fileInput">
  <div id="imgPreview">
    <img id="preview" src="">
  </div>
  <script>
    $(document).ready(function() {
      $("#fileInput").change(function() {
        var file = this.files[0];
        var objUrl = getObjectURL(file);
        if (objUrl) {
          $("#preview").attr("src", objUrl);
        } else { //上传非图片文件时使用预设的图片替代原本的预览图
          $("#preview").attr("src", "warning.jpg");
        }
      });
    });
    function getObjectURL(file) {
      var url = null;
      if (window.createObjectURL != undefined) {
        url = window.createObjectURL(file);
      } else if (window.URL != undefined) {
        url = window.URL.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        url = window.webkitURL.createObjectURL(file);
      }
      return url;
    }
  </script>
</body>
</html>

结束语

通过以上两个实例,我们可以看到jQuery实现图片上传预览效果的方法非常简单,只需要运用input元素的change事件和图片的获取、替换等方法即可实现。当然,你也可以根据自己的需求对以上示例进行修改和优化,达到更好的使用效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery实现图片上传预览效果功能完整实例【测试可用】 - Python技术站

(0)
上一篇 2023年5月18日
下一篇 2023年5月18日

相关文章

  • JS将所有对象s的属性复制给对象r(原生js+jquery)

    将所有对象s的属性复制给对象r是一种常见的实现需求。可以使用原生JavaScript或jQuery实现此功能。下面会分别介绍两种方式。 原生JavaScript实现 假设有两个对象s和r,现在需要将对象s的所有属性复制到对象r。可以按照以下步骤实现: 使用for…in语句遍历对象s的所有属性,将属性名和属性值存储为key/value对。 使用Object…

    jquery 2023年5月28日
    00
  • jQWidgets jqxDocking floatingWindowOpacity属性

    以下是关于“jQWidgets jqxDocking floatingWindowOpacity属性”的完整攻略,包含两个示例说明: 属性简介 floatingWindowOpacity 是 jQWidgets jqxDocking 控件的属性,用于设置浮动窗口的透明度。该属性的默认值为 0.5,取值范围为 0 到 1。 完整攻略 下面是使用 floatin…

    jquery 2023年5月10日
    00
  • jQuery实现页面倒计时并刷新效果

    下面将详细讲解如何使用jQuery实现页面倒计时并刷新效果的完整攻略。 1. 添加必要的HTML和CSS代码 首先,需要在HTML中添加用于显示倒计时和刷新按钮的标签,如下所示: <p>页面将在 <span id="countdown"></span> 秒后自动刷新</p> <butt…

    jquery 2023年5月28日
    00
  • jQWidgets jqxDropDownList autoItemsHeight属性

    jQWidgets jqxDropDownList autoItemsHeight属性详解 jQWidgets是一个基于jQuery的UI组件库,提供了丰富UI组件和工具包。jqxDropDownList是Widgets组件实现下拉列表组件。本文将详细介绍jqxDropDownList的autoItemsHeight属性,包括作用、语法和示例。 autoIt…

    jquery 2023年5月10日
    00
  • jQuery Mobile页面closeBtnText选项

    jQuery Mobile是一个用于移动端的JavaScript框架,它可以帮助我们快速地构建响应式页面。在开发移动端网站时,关闭按钮是一个常用的功能。jQuery Mobile为此提供了一个closeBtnText选项,可以用于指定关闭按钮的文本。 closeBtnText选项的用法 closeBtnText选项可以用于将默认的关闭按钮文本更改为自定义文本…

    jquery 2023年5月12日
    00
  • jQWidgets jqxValidator animationDuration属性

    jQWidgets jqxValidator 动画时长(animationDuration)属性详解 在一个表单验证工具中,动画特效可以提高用户体验。jQWidgets jqxValidator组件允许应用动画特效来引导用户向正确的输入方式迭代。animationDuration属性就是控制这些动画特效的时间。 属性介绍 属性名称 animationDura…

    jquery 2023年5月12日
    00
  • jQWidgets jqxNavigationBar toggleMode属性

    以下是关于 jQWidgets jqxNavigationBar 组件中 toggleMode 属性的详细攻略。 jQWidgets jqxNavigationBar toggleMode 属性 jQWidgets jqxNavigationBar 的 toggleMode 属性用于设置导航栏组件的切换模式。 语法 // 设置导航栏组件的切换模式 $(‘#n…

    jquery 2023年5月12日
    00
  • jQuery查询数据返回object和字符串影响原因是什么

    jQuery 是一个非常流行的 JavaScript 库,它有着强大的选择器功能,可以非常方便的从 DOM 中查询数据。在 jQuery 查询数据时,有时会出现返回值为对象和字符串的情况,这是为什么呢? 1. jQuery 查询数据返回对象 当使用 jQuery 选择器查询 DOM 元素时,如果查询到的元素只有一个,那么 jQuery 会将这个元素封装成一个…

    jquery 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部