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' onclick='delimage(" + index+ ");' />";
     }
     if (index >=3){
      var cnt = index + 1;
      $("img" + cnt).style.display = "";
     }
    }

jquery实现上传图片及图片大小验证、图片预览效果代码的更多相关文章

  1. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  2. ThinkPHP5与JQuery实现图片上传和预览效果

    内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果\、

    在firefox\chrome\ie10等浏览器中可以使用HTML5中的内容实现图片即时预览效果,在IE10以下浏览器中使用滤镜来解决图片显示问题. HTML5中的FileReader对象主要是把文件 ...

  4. 基于jquery实现的上传图片及图片预览效果代码

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  5. 微信小程序图片上传放大预览删除代码

    效果: 一,下面是上传图片的效果 image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { v ...

  6. ckeditor 实现图片上传以及预览(亲测有效)

    引用ckeditor <script type="text/javascript" src="static/ckeditor/ckeditor.js"&g ...

  7. javascript和HTML5上传图片之前实现预览效果

    一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内 ...

  8. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  9. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

随机推荐

  1. (linux)wake_lock机制

      Android的休眠唤醒主要基于wake_lock机制,只要系统中存在任一有效的wake_lock,系统就不能进入深度休眠,但可以进行设备的浅度休眠操作.wake_lock一般在关闭lcd.tp但 ...

  2. vue 中的组件通信

    vue中组件通信,一般分为三种情况,父与子,子与父,子子之间. 一.父与子通信 父组件将值传给子组件,一般通过props,设置默认的类型.调用的时候通过 xx=" ", 或者:XX ...

  3. shell脚本怎么调试

    shell是Linux系统上常用的一种脚本语言.一般从事web后台开发的从业者,都会用到shell,因此shell调试也是一项必备的技能.本文教你如何进行shell脚本调试. 工具/原料   Linu ...

  4. 计算机科学 —— 时间戳(timestamp)

    时间戳的一个重要属性即是:唯一性,以起到唯一标识的作用: 1. linux 命令行 $ date +%s 1506222745 2. Python 时间戳 内置 time 库 >> tim ...

  5. I.MX6 android 源码下载

    /************************************************************************* * I.MX6 android 源码下载 * 说明 ...

  6. [Selenium] 如何绕过 IE 的安全模式

    自从 IE7 引入 Protected Mode 以来, IE 浏览器的安全性的确得到了一定程度的提高.其原理从本质来讲,在浏览某些需要启用保护模式的页面时,会开启一个新的浏览器会话以完成任务,而此时 ...

  7. Com组件介绍

    COM组件简介 面向对象的思想难以适应这种分布式软件模型,于是组件化程序设计思想得到了迅速的发展. 按照组件化的程序设计的思想,复杂的应用程序被设计成一些小的,功能单一的组件模块,这些组件模块可以运行 ...

  8. PostgreSQ 连接问题 FATAL: no pg_hba.conf entry for host

    PostgreSQ数据库为了安全,它不会监听除本地以外的所有连接请求,当用户通过JDBC访问是,会报一些如下的异常: org.postgresql.util.PSQLException: FATAL: ...

  9. PHP empty()函数使用需要注意

    在 PHP 5.5 之前,empty() 仅支持变量:任何其他东西将会导致一个解析错误.换言之,下列代码不会生效: empty(trim($name)). 作为替代,应该使用trim($name) = ...

  10. python接口自动化(三十八)-python操作mysql数据库(详解)

    简介 现在的招聘要求对QA人员的要求越来越高,测试的一些基础知识就不必说了,来说测试知识以外的,会不会一门或者多门开发与语言,能不能读懂代码,会不会Linux,会不会搭建测试系统,会不会常用的数据库, ...