资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/利用jQuery插件uploadPreview实现图片上传以及validate表单验证示例详解

利用jQuery插件uploadPreview实现图片上传以及validate表单验证示例详解

Darkgel / 1909人阅读

摘要：首先给大家介绍我之前遇到的问题，传统的图片上传展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。下次是截图仅供参考或者是这样有其他参数的验证具体的详细参数的一些问题，请参考其他网站。

首先给大家介绍我之前遇到的问题，传统的图片上传、展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。仅供小白参考。

引入jquery之后，在引入以下的js，我会简单介绍以下，后续有详细的讲解：

</>复制代码 
  1.    //这是图片展示的插件
  2.    //这是防止form提交跳转的插件
  3.    //这是表单提交

html代码：

</>复制代码 
  1.        
  2.            
    图片大小不超过2M，支持png、jpg、bmp格式。
  3.                    
  4.                    //这是上传图片的input框，你可以改边样式让其隐藏在你需要点击上传的地方                     
  5.

js代码：

</>复制代码 
  1. $("#Codeinput").uploadPreview({//这是图片上传的代码
  2.   Img: "codeImg",//预留展示img的id
  3.   ImgType: ["jpg", "bmp", "png"],//图片的格式
  4.   Callback: function() {
  5.   //成功展示后的回调函数
  6.   }
  7. });
  8. $(".medio-btn").click(function() {//点击执行的函数
  9.       initValidate()//点击执行的函数
  10. })
  11. // 初始化表单验证
  12. function initValidate() {
  13.    if($("#Codeinput").val() == "") {//判断input框中是否有图片
  14.        alert("请上传图片")
  15.    } else {
  16.        $("#CodeId").ajaxSubmit({
  17.           success: function(data) {//成功上传的回调函数
  18.            if(data.success) {//判断后台返回值
  19.                alert("上传成功")
  20.            } else {
  21.                alert("上传失败")
  22.            }
  23.        }
  24.    });
  25.   }
  26. }

其他设置
事例图片如下

</>复制代码 
  1. 1.有一个默认的图片

</>复制代码 
  1.  2.点击上传图片按钮并选择其中一个

</>复制代码 
  1.  3.打开

</>复制代码 
  1.  4.点击上传图片成功

5. 其他注意事项

</>复制代码 
  1. 1.对图片还进行宽高等其他参数设置，请参考其他网站
  2. 2.上传图片也可以进行对大小的限制，比如是2M以下的设置。下次是截图仅供参考

</>复制代码 
  1.    3.或者是这样有其他参数的验证

</>复制代码 
  1.    4.具体的详细参数的一些问题，请参考其他网站。

6. 说明

请大家多多提出意见，我会一一解答，谢谢。

GPU云服务器 云服务器 validate表单验证 jquery表单插件 jQuery图片插件 jquery_form验证插件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52543.html

相关文章

  • 利用jQuery插件uploadPreview实现图片上传以及validate表单验证示例详解

    摘要：首先给大家介绍我之前遇到的问题，传统的图片上传展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。下次是截图仅供参考或者是这样有其他参数的验证具体的详细参数的一些问题，请参考其他网站。 首先给大家介绍我之前遇到的问题，传统的图片上传、展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。仅供小白参考。 引入jquery之后，在引入以下的js，我会简...

    The question 评论0 收藏0

  • 利用jQuery插件uploadPreview实现图片上传以及validate表单验证示例详解

    摘要：首先给大家介绍我之前遇到的问题，传统的图片上传展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。下次是截图仅供参考或者是这样有其他参数的验证具体的详细参数的一些问题，请参考其他网站。 首先给大家介绍我之前遇到的问题，传统的图片上传、展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。仅供小白参考。 引入jquery之后，在引入以下的js，我会简...

    Reducto 评论0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

    Hydrogen 评论0 收藏0

  • javascript功能插件大集合 前端常用插件 js常用插件

    摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。 转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

    netmou 评论0 收藏0

发表评论

登陆后可评论

0条评论

Darkgel

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<