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. 基于MATLAB的滤波算法

    目前比较经典的图像去噪算法主要有以下三种: 均值滤波:也称线性滤波,主要思想为邻域平均法,即用几个像素灰度  的平均值来代替每个像素的灰度.有效抑制加性噪声,但容易引起图像模糊,  可以对其进行改进, ...

  2. java中的泛型类和泛型方法

    1.泛型是什么? 泛型(Generic type 或者 generics)是对 Java 语言的类型系统的一种扩展,以支持创建可以按类型进行参数化的类. 可以在集合框架(Collection fram ...

  3. 书写优雅的shell脚本(插曲) - kill

    shell之kill.killall.xkill.pkill 2013-01-08 22:03:28|  分类: Linux|举报|字号订阅 1 kill kill的应用是和ps 或pgrep 命令结 ...

  4. CentOS 6.5升级到CentOS 7

    CentOS7 已经发布了,之前一直想在上面测试一下,一直没有机会,这次终于可以感受一下CentOS7了.一直使用CentOS6.5有一段时间了,但是由于它的内核版本依然停留在2.6.32,所以决定升 ...

  5. 移动web开发-------meta

    <meta content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0″ name=”v ...

  6. DebugView 使用

    最近遇到带加密狗的工程项目,无法使用控制台调试,尝试使用DebugView进行辅助调试. DebugView是一个系统调试信息输出的捕获工具,可以捕获程序中由TRACE(debug版本)和Output ...

  7. 什么是位、字节、字、KB、MB?

    1. 位(bit)是计算机里最小的数据单位,每一位的状态只能是0或者1 2. 字节(Byte)      1Byte = 8 bit      它是存储空间的基本计量单位,1byte可以存储一个英文字 ...

  8. 记一次OutOfMemory定位过程

    背景 最近有个项目部署到了AWS,部署方案是ECS+Docker+Java Launch type CPU Units Memory FARGATE 1024 4G 运行后发现程序表现不符合预期--每 ...

  9. git 基本命令详细解释

    创建: 2017-04-05 17:04:03         2017-04-24 更新: 2017-05-16 更新: 2017-06-27  完善git remote add  更新: 2017 ...

  10. [原]Windows下openssl的下载安装和使用

    安装openssl有两种方式,第一种直接下载安装包,装上就可运行:第二种可以自己下载源码,自己编译.下面对两种方式均进行详细描述. 一.下载和安装openss 方法一:直接使用openssl安装包 W ...