layui 阻止图片上传的实例(before方法)

今天项目上传图片需要校验大小，而且各个地方图片大小的限制不一样，如果在后台控制会比较麻烦，所以就放在 js 里校验，这里用的layui（1.0.9） 的 upload.js 模块。这个版本的layui本来是不支持阻止图片上传的，所以改动了源码。

//改动前的
s.before && s.before(e),l.parent().submit();
//改动后的
if(s.before==undefined || s.before(e)==undefined || (s.before && s.before(e))) l.parent().submit();
else return false;

由于之前的上传图片是没有 写before方法的（会返回undefined），为了不改动之前的代码，就在这里加了判断。s.before 是 before 方法的内容，s.before(e) 是 before 方法的返回值，如果没有就回返回undefined 。

以上这篇layui 阻止图片上传的实例(before方法)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • layui 图片上传+表单提交+ Spring MVC的实例

    Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML: <div class="layui-form-item"> <label class="layui-form-label">修改头像</label> <div class="layui-input-inline uploadHeadImage"> <div class="layui-u

  • layui实现多图片上传并限制上传的图片数量

    废话不多说了,直接上代码吧! //给图片添加删除 function mouseChange() { $(document).on("mouseenter mouseleave", ".file-iteme", function (event) { if (event.type === "mouseenter") { //鼠标悬浮 $(this).children(".info").fadeIn("fast"

  • layui实现文件或图片上传记录

    layui实现文件或图片上传记录

    本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下 首先是layui自己的官网关于图片/文件上传的帮助文档: 接下来是我自己的使用记录: 1.首先在js中定义一个全局变量 var uploadListIns; 2.进行赋值 //多文件列表示例 /** * 图片上传 */ layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; var demoListView = $(

  • layui 富文本图片上传接口与普通按钮 文件上传接口的例子

    富文本-图片上传 html: <div class="layui-form-item layui-form-text"> <div class="layui-input-block"> <!--<textarea id="L_content" name="contents" required lay-verify="required" placeholder="

  • 在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

    在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法 在ssm框架整合中,使用layui作为前端页面,拖拽图片上传,填写接口后,后台能够成功接收到数据,但由于页面资源和后台访问地址的不一致(即使域名一致但端口不一致)引起跨域问题,导致接收资源后在前端无法接收到后台返回的数据. 前台页面: <html> <head> <meta charset="UTF-8"> <title>校园网络打印</title> <li

  • layui 上传图片 返回图片地址的方法

    默认是file参数名 返回一个Map 前端接收即可. 以上这篇layui 上传图片 返回图片地址的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • layui实现图片虚拟路径上传,预览和删除的例子

    效果如下所示: 前端: <style type="text/css"> #detailTbody tr:hover { background: #fff; } .layui-form-label { width: 110px; } .uploader-list { margin-left: -15px; } .uploader-list .info { position: relative; margin-top: -25px; background-color: blac

  • 解决layui富文本编辑器图片上传无法回显的问题

    layui富文本编辑器用起来挺方便的,但是不足的是不提供图片上传的接口,需要自己写上传接口,而且返回的数据类型要符合layui富文本编辑器图片上传插件的要求,否则图片可以上传成功,但是无法回显,这个问题找了好久才找到原来是返回的数据结构不符合layui要求,经过修改才得以解决,现在把代码贴出来共享.加粗字体的代码是返回数据结构 @ResponseBody @RequestMapping(value = "fillupf", method = RequestMethod.POST) pu

  • ThinkPHP5+Layui实现图片上传加预览功能

    html代码 <div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上传封面</button> </div> <div class="layui-input-inline"> <img id="preview" width

  • layui 阻止图片上传的实例(before方法)

    今天项目上传图片需要校验大小,而且各个地方图片大小的限制不一样,如果在后台控制会比较麻烦,所以就放在 js 里校验,这里用的layui(1.0.9) 的 upload.js 模块.这个版本的layui本来是不支持阻止图片上传的,所以改动了源码. //改动前的 s.before && s.before(e),l.parent().submit(); //改动后的 if(s.before==undefined || s.before(e)==undefined || (s.before &am

  • jQuery自定义图片上传插件实例代码

    jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

  • PHP之图片上传类实例代码(加了缩略图)

    有缩略图功能 但是 感觉不全面,而且有点问题,继续学习,将来以后修改下 <form action="<?php $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" method="post" ><input type="text" name="name" /><input type="file&q

  • PHP实现微信图片上传到服务器的方法示例

    本文实例讲述了PHP实现微信图片上传到服务器的方法.分享给大家供大家参考,具体如下: $pic_img=trim( $postObj->PicUrl); if($type=="image"){ $pic_url=save_file_to_sever($pic_img,$fromUsername); } GetRootPath(){ $sRealPath = realpath('./'); $sSelfPath = $_SERVER['PHP_SELF']; $sSelfPath

  • C#图片上传效果实例分析

    本文实例讲述了C#图片上传效果实现方法.分享给大家供大家参考.具体如下: <%@ Page Title="" Language="C#" MasterPageFile="~/Default.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %> <asp:Conte

  • php实现base64图片上传方式实例代码

    php实现base64图片上传方式实例代码

    本例子中没有采用File Post上传文件方式!原理一样,为了更加的理解base64 选择将其输出在文本域中,并提交至服务器!运用到项目中建议采用提交File方式. html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

  • 微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序教程之本地图片上传(leancloud)实例详解

    微信小程序 leancloud --本地图片上传 由于本站最近学习微信小程序的知识,这里记录下微信小程序实现本地上传的功能实现方法,以下是网上找的资料,大家看下. 将本地图片上传至leancloud后台. 获取本地图片或者拍照,我在上一篇博文中写过.这里就不说了.我的博客 直接上代码: 1.index.js //index.js //获取应用实例 var app = getApp() const AV = require('../../utils/av-weapp.js'); Page({ da

  • .Net学习笔记之Layui多图片上传功能

    .Net学习笔记之Layui多图片上传功能

    前言: 多图上传在一些特殊的需求中我们经常会遇到,其实多图上传的原理大家都有各自的见解.对于Layui多图上传和我之前所说的通过js获取文本框中的文件数组遍历提交的原理一样,只不过是Layui中的upload.render方法已经帮我们封装好了,我们只管调用即可,也就是说你选中了几张图片,那么将会向后台请求与图片张数相同的次数,即为遍历提交的方式. Layui文件/图片样式地址(官方文档):https://www.layui.com/demo/upload.html 一.引入Layui.cs和L

  • PHP实现多图片上传类实例

    本文所述为一个实用的PHP多图片文件上传类,其支持gif.jpg.jpeg.pjpeg.png格式的多图片上传功能,类中还可限制图片类型.上传图片的大小.设置上传目录.一些提交判断等功能.此外该类并不局限于图片的上传,也可以上传TXT/RAR等文件类型,只是需要对代码进行一下修改,感兴趣的读者可以自己尝试一下. php多图片上传类完整功能代码如下: <?php class more_file_upload{ const FILE_PATH = '/uploadfile/'; //默认文件上传的目

随机推荐