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

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

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

上传图片验证

*/

    function submit_upload_picture(){
     var file = $('file_c').value;
     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
        }else{
      $('both_form').action="file!upload.action";
      $('both_form').submit();
      $('insert_img').sethtml('<img src="http://images.anjiwu.com/images/loading.gif"/>');
      $('display_div').setstyle('display', 'block');
      $('upload_div').setstyle('display', 'none');
     }
    }

图片类型与大小的验证

//实例二

    function validate_edit_logo(a){
     var file = $('file').value;
     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){
            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
            if(a==1){
             return false;
            }
        }else{
         var image = new image();
         image.src = file;
         var height = image.height;
         var width = image.width;
         var filesize = image.filesize;
         $('beforeend').src=file;
         $('div_regi_right').setstyle('display', 'block');
         if(width>80 && height>80 && filesize>102400){
          alert('请上传80*80像素 或者大小小于100k的图片');
          if(a==1){
           return false;
          }
         }
         if(a==1){
          return true;
         }
     }
    }

图片预览

//实例三

    function viewimg(index) {
     var name = 'uploadimg' index;
     var imgup = $(name);
     var imgpath = getpath(imgup);
     var   local   =   imgup.value;
     var   point   =   local.lastindexof(".");
     //判断上传文件大小
     var img   =   document.createelement("img");    
     img.src   =   local;
     var filesize = img.filesize;
     img.onload = function(){filesize=this.filesize;}
     if(img.filesize>5242880){ 
      alert("图片文件过大!");
      return   false;
     }
     
     //判断是否是图片格式
     var imgname = imgup.value.substring(imgup.value.lastindexof("."), imgup.value.length);
     imgname = imgname.tolowercase();
     if ((imgname != ".jpg") && (imgname != ".gif") &&(imgname != ".jpeg") && (imgname != ".png") && (imgname!= ".bmp")) {
      alert("u8bf7u9009u62e9u56feu7247u6587u4ef6uff0cu8c22u8c22!");
      imgup.focus();
      //清空file里面的值www.3ppt.com
      imgup.select();
      document.selection.clear();
     } else {
     //显示图片
      document.getelementbyid("sig_preview" index).innerhtml = "<imgsrc='" imgpath "' border=0 width=200 height=150><imgsrc='images/u51.png' width='16' height='14' οnclick='delimage(" index ");' />";
     }
     if (index >=3){
      var cnt = index 1;
      $("img" cnt).style.display = "";
     }
    }


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/360992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Spring Boot和Logback登录到Redis

在进行集中式日志记录时&#xff0c;例如使用Elasticsearch&#xff0c;Logstash和Kibana或Graylog2&#xff0c;您可以为Java应用程序提供几个选项。 您既可以编写标准的应用程序日志&#xff0c;也可以使用Logstash解析这些日志&#xff0c;这些日志既可以直接使用&#xff0…

《CSS世界》学习笔记(一)

《CSS世界》&#xff0c;张鑫旭著&#xff0c;人民邮电出版社&#xff0c;2017年12月第一版。 1.P9二维码链接文章的demo值得一看&#xff0c;可以实现有关“某些区域颜色始终保持一致”的效果。 P9二维码所链接文章的一个demo里&#xff0c;图标用i标签 背景图的形式实现。我…

Tautology(poj3295)(DFS)

本题中最多5个命题变项&#xff1a;p,q,r,s,t 每个有0,1两种取值&#xff0c;所以总共32种情况&#xff0c;分别枚举即可。 对于每种情况&#xff0c;计算表达式的值&#xff0c;如果有结果为0的则输出not 难点在于如何计算表达式的值&#xff0c;我们采用递归的方法&#xff0…

Spring重试–与项目集成的方式

如果您需要在代码中实现健壮的重试逻辑&#xff0c;一种行之有效的方法是使用spring重试库。 我的目的不是要展示如何使用spring retry项目本身&#xff0c;而是要展示可以将其集成到代码库中的不同方式。 考虑一种服务来调用外部系统&#xff1a; package retry.service;pub…

(1)《Head First HTML与CSS》学习笔记---HTML基本概念

前言&#xff1a; 1. 这本书并没有面面俱到&#xff0c;涵盖所有内容&#xff0c;只提供作为初学者真正需要的东西&#xff1a;基本知识和信心。所以这不是唯一的参考书。&#xff08;我买了一本《HTML5权威指南》作为参考书和这本一起看&#xff0c;但还是以本书为第一个…

mac中如何从vim文本编辑器退回到命令

有的时候&#xff0c;我们经常从命令行中进入vim文本编辑器&#xff0c;如何退回来呢&#xff1a; 只需要经过两步&#xff1a;1.按下esc键 2.输入":wq"(保存退出) 输入":q!"(不保存退出) 在文件名前面加./ ,表示在当前目录中查找该文件 例如执行可执行文…

拥有您的堆:使用JVMTI迭代类实例

今天&#xff0c;我想谈一谈我们大多数人每天都不会看到和使用的另一种Java&#xff0c;更确切地说&#xff0c;是有关较低级别的绑定&#xff0c;一些本机代码以及如何执行一些小的魔术。 尽管我们不会在JVM上找到真正的魔力源&#xff0c;但是在单个帖子的范围内可以实现一些…

Dojo高级Web2.0 UI组件库---Tree组件

Tree组件可以把有层次关系的数据用树状结构展现出来&#xff0c;就如同 Windows 系统的资源浏览器。Tree有两个模板&#xff0c;一个是Tree模板&#xff0c;一个是TreeNode模板&#xff0c;应该说Tree模板就是一个容器&#xff0c;里面有很多TreeNode.而初始化树&#xff0c;打…

使用Java 8防止日志过宽

一些日志将被机器消耗并永久保存。 其他日志仅用于调试和供人类使用。 在后一种情况下&#xff0c;您通常要确保您不会产生过多的日志&#xff0c;尤其是不会产生太宽的日志&#xff0c;因为一旦行长超过一定大小&#xff08; 例如&#xff0c;此Eclipse bug &#xff09;&…

[one day one question] webpack打包压缩 ES6 js、.vue报错

问题描述&#xff1a; 报错&#xff1a; ERROR in js/test.js from UglifyJs Unexpected token punc ?(?, expected punc ?:? [js/test.js:1374,5]&#xff0c;这怎么破&#xff1f; 解决方案&#xff1a; 配置babel&#xff0c;把配置放到文件【.babelrc】中{"prese…

UVA10236 斐波那契素数

题意&#xff1a;任取斐波那契数列中一项f[i],若对于所有j 解法&#xff1a;这题的理论分析在黑书上有&#xff0c;结论是从第五项开始下标为素数的斐波那契数都是斐波那契素数 #include <stdio.h> #include <string.h> const int MAXN 250010;; int prime[25010]…

[one day one question] safari缓存太厉害

问题描述&#xff1a; safari缓存太厉害&#xff0c;这怎么破&#xff1f; 解决方案&#xff1a; window.onpageshow function(event) {if (event.persisted) {window.location.reload() }}; 君生我未生&#xff0c;我生君已老 君恨我生迟&#xff0c;我恨君生早 君生我未生&…

Android 网络编程之Http通信

Android中提供的HttpURLConnection和HttpClient接口可以用来开发HTTP程序。以下是本人在学习中的总结与归纳。1. HttpURLConnection接口 首先需要明确的是&#xff0c;Http通信中的POST和GET请求方式的不同。GET可以获得静态页面&#xff0c;也可以把参数放在URL字符串后面&…

EE Servlet 3:在Servlet中生成HTML输出

如果您只需要在EE Web模块中处理少量请求URI&#xff0c;则在Servlet代码中生成自己HTML响应可能比使用完整的模板库更容易。 作为示例的一部分&#xff0c;我尝试了一个非常简单的Java DSL&#xff0c;该Java DSL在编写自己的Serlvet时生成html输出。 代码如下&#xff1a; p…

[one day one question] express 不缓存如何实现

问题描述&#xff1a; express 默认缓存&#xff0c;这怎么破&#xff1f; 解决方案&#xff1a; apiRoutes.use(function (req, res, next) {res.setHeader(Cache-Control, no-cache, no-store, must-revalidate);res.setHeader(Pragma, no-cache);res.setHeader(Expires, 0)…

正则表达式摘录

正则表达式到底是什么东西&#xff1f;在编写处理字符串的程序或网页时&#xff0c;经常会有查找符合某些复杂规则的字符串的需要。正则表达式就是用于描述这些规则的工具。换句话说&#xff0c;正则表达式就是记录文本规则的代码。常用元字符 代码说明.匹配除换行符以外的任意…

Java生态系统– 2014年我的5大亮点

1. 2月1日-RedMonk Analyst公司宣布Java比以往任何时候都更加流行和多样化&#xff01; 2014年&#xff0c;随着FOSDEM的Free Java会议室的年会&#xff0c;Java生态系统开始轰轰烈烈地响起。 除了关于OpenJDK和相关主题的许多精深的技术讲座外&#xff0c;Steve OGrady&#x…

WEB前端大神之路之基础篇

CSS篇&#xff1a; 1.CSS权重&#xff1a; 不重复造轮子啦&#xff0c;直接传送门&#xff08;CSS选择器的权重与优先规则&#xff09; JavaScript篇&#xff1a; 1.this关键字&#xff1a; 它是一种引用&#xff08;referent&#xff09;。指向的是当前上下文&#xff08;con…

与Java EE和Camel的轻量级集成

Enterprise Java具有不同的风格和观点。 从简单的平台技术开始&#xff0c;即众所周知的Java EE&#xff0c;再到不同的框架和集成方面&#xff0c;最后是涉及以数据为中心的用户界面或特定可视化效果的用例。 Java EE本身无法解决的最突出的问题是“集成”。 有许多来自知名供…

java=====Striing date 转化

java中string与date(日期)格式之间的转换 经常遇到string和date之间的转换&#xff0c;把相关的内容总结在这里吧&#xff1a; 1.string格式转化为Date对象&#xff1a; //把string转化为dateDateFormat fmt new SimpleDateFormat("yyyy-MM-dd"); Date date fmt.par…