基于jquery实现的上传图片及图片大小验证、图片预览效果代码

基于jquery实现的上传图片及图片大小验证、图片预览效果是一个常见的功能,在前端开发中比较常见。下面我来详细讲解一下如何实现。

HTML部分:

<!--表单部分-->
<form>
  <input type="file" id="uploadImage" name="uploadImage">
</form>

<!--图片预览-->
<div id="previewImage"></div>

JavaScript部分:

//定义一个回调函数,用于图片上传完成之后执行的操作
function uploadComplete(data) {
  //可以在此处解析后台返回的数据,做相应的处理
}

$(function() {
  //监听input的change事件
  $('#uploadImage').change(function() {
    //获取input的file对象
    var file = this.files[0];
    //判断是否为图片
    if(!/image\/\w+/.test(file.type)) {
      alert('请选择图片上传!');
      return false;
    }
    //判断图片的大小是否符合要求
    if(file.size > 1024*1024) {
      alert('图片的大小不得超过1MB!');
      return false;
    }
    //创建FormData对象,通过ajax方式上传图片
    var formData = new FormData();
    formData.append('uploadImage', file);
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data) {
        //上传完成之后,执行回调函数
        uploadComplete(data);
      }
    });
    //读取文件并显示预览效果
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#previewImage').html('<img src="'+e.target.result+'">');
    };
    reader.readAsDataURL(file);
  });
});

在上述代码中,我使用了jQuery库来监听了input的change事件。然后,通过使用FileReader对象,读取了上传的图片,在预览区域中显示了图片的预览效果。

另外,为了确保上传的图片大小不会超过1MB,我使用了file.size属性获取了图片的大小,并与1MB进行比较。

示例一:上传图片并预览效果

<form>
  <input type="file" id="uploadImage" name="uploadImage">
</form>

<div id="previewImage"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function uploadComplete(data) {
  //可以在此处解析后台返回的数据,做相应的处理
}

$(function() {
  $('#uploadImage').change(function() {
    var file = this.files[0];
    if(!/image\/\w+/.test(file.type)) {
      alert('请选择图片上传!');
      return false;
    }
    if(file.size > 1024*1024) {
      alert('图片的大小不得超过1MB!');
      return false;
    }
    var formData = new FormData();
    formData.append('uploadImage', file);
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data) {
        uploadComplete(data);
      }
    });
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#previewImage').html('<img src="'+e.target.result+'">');
    };
    reader.readAsDataURL(file);
  });
});
</script>

示例二:上传图片并获取返回的数据

<form>
  <input type="file" id="uploadImage" name="uploadImage">
</form>

<div id="previewImage"></div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
function uploadComplete(data) {
  var jsonData = JSON.parse(data);
  if(jsonData.code === 200) {
    alert('上传成功!');
  } else {
    alert('上传失败!');
  }
}

$(function() {
  $('#uploadImage').change(function() {
    var file = this.files[0];
    if(!/image\/\w+/.test(file.type)) {
      alert('请选择图片上传!');
      return false;
    }
    if(file.size > 1024*1024) {
      alert('图片的大小不得超过1MB!');
      return false;
    }
    var formData = new FormData();
    formData.append('uploadImage', file);
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data) {
        uploadComplete(data);
      }
    });
    var reader = new FileReader();
    reader.onload = function(e) {
      $('#previewImage').html('<img src="'+e.target.result+'">');
    };
    reader.readAsDataURL(file);
  });
});
</script>

在示例二中,上传图片之后,使用JSON.parse()方法将后台返回的json字符串转换成了一个JavaScript对象,然后根据返回的code值进行了相应的处理。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:基于jquery实现的上传图片及图片大小验证、图片预览效果代码 - Python技术站

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

相关文章

  • jQWidgets jqxScheduler appointmentDataFields属性

    jQWidgets是一个支持跨平台的JavaScript框架,提供了丰富的UI组件和工具。jqxScheduler是jQWidgets提供的一种用于创建日程安排和时间表的UI组件。在jqxScheduler中,appointmentDataFields属性用于定义一个日程对象的各个字段。 appointmentDataFields属性的语法如下: appoi…

    jquery 2023年5月11日
    00
  • jQWidgets jqxChart enabled 属性

    jQWidgets 的 jqxChart 组件提供了 enabled 属性,用于启用或禁用图表。本文将详细介绍 enabled 属性的使用方法,包括概述、示例以及注意项。 enabled 属性概述 enabled 属性用于启用或禁用图表。可以将该属性设置为 true 或 false,分别表示启用或禁用图表。如果未设置该属性,则图表默认为启用状态。 enabl…

    jquery 2023年5月11日
    00
  • jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象

    下面是关于”jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象”的详细讲解攻略。 jQuery筛选数组之grep、each、inArray、map的用法 grep $.grep() 函数的作用是筛选出符合条件的数组元素,并且将它们返回成新的数组。具体的语法如下: $.grep( array, function(eleme…

    jquery 2023年5月28日
    00
  • jQuery点击按钮弹出遮罩层且内容居中特效

    关于“jQuery点击按钮弹出遮罩层且内容居中特效”的攻略,我将从以下几个方面进行详细讲解: 引入jQuery和CSS文件 创建HTML结构 编写CSS样式 编写jQuery代码 下面我将一步步详细展开说明。 1. 引入jQuery和CSS文件 首先,我们需要在HTML页面中引入jQuery库和CSS样式文件,CSS文件包含了遮罩层和弹窗的样式定义,代码如下…

    jquery 2023年5月27日
    00
  • Web开发者必备的12款超赞jQuery插件

    Web开发者必备的12款超赞jQuery插件攻略 在Web开发过程中,经常会使用到jQuery插件来增强网页的交互和效果,提高用户体验。本文将介绍Web开发者必备的12款超赞jQuery插件,并提供使用示例。 1. jQuery Validation jQuery Validation是一款轻量级的表单验证插件,支持多种表单验证规则,包括必填、email、数…

    jquery 2023年5月28日
    00
  • jQWidgets jqxTreeGrid rtl属性

    以下是关于 jQWidgets jqxTreeGrid 组件中 rtl 属性的详细攻略。 jQWidgets jqxTreeGrid rtl 属性 jQWidgets jqxTreeGrid 组件的 rtl 属性用于设置 TreeGrid 控件的文本方向。当 rtl 属性为 true 时,TreeGrid 控件的文本方向从右到左。 语法 $(‘#treegr…

    jquery 2023年5月12日
    00
  • jQWidgets jqxGrid renderaggregates()方法

    以下是关于“jQWidgets jqxGrid renderaggregates()方法”的完整攻略,包含两个示例说明: 方法简介 renderaggregates() 方法是 jQWidgets jqxGrid 控件的一个方法,用于渲染聚合数据。该方法的语法如下: $("#jqxGrid").jqxGrid(‘renderaggrega…

    jquery 2023年5月10日
    00
  • jQuery响应滚动条事件功能示例

    我来为你详细讲解“jQuery响应滚动条事件功能示例”的攻略。 1. 添加滚动条事件监听 首先,我们需要给页面的滚动区域添加一个滚动条事件监听,以便在滚动时能够进行相应的操作。使用jQuery来完成这个操作,代码如下: $(window).scroll(function() { // 滚动条滚动时的操作 }); 这里使用$(window),因为我们监听的是整…

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