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

时间: 2024-08-02 15:12:25

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

图片上传即时预览效果

做项目时一同事推荐的一个picload插件,实现图片上传后,即时预览效果,感觉很不错,分享出来. 点击上传图片后.立即看到预览的效果如下图: 布局代码: <div class="banner" id="CoupicPicYes">图片预览</div> <a class="input-file" href="javascript:void(0);" onclick="$('#photoUp

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

很早以前 在杭州银行工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简单的demo来实现 本地上传图片即时预览效果.其在标准浏览器(firefox,chrome,IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果.在IE10以下浏览器用了滤镜来解决图片显示问题.在看代码之前,先让我们来了解以下知识点: HTML5中的FileReader对象: FileReader对象主要是把文件读入内存中,

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

一:FileList对象与file对象 FileList对象表示用户选择的文件列表,在HTML4中,file控件内只允许放置一个文件,但是到了HTML5中,通过添加multiple属性,file控件内允许一次放置多个文件,控件内的每一个用户选择的文件都是一个file对象,而FileList对象是file对象的列表: 比如如下代码: 选择文件<input type="file" id="file" multiple size="80"/>

HTML5 jQuery图片上传前预览

HTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等. <!DOCTYPE html><html> <head> <title>HTML5上传图片预览</title> <meta char

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

hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能.请选择支持HTML API的浏览器,比如 谷歌Chrome和火狐等. <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta h

JQuery插件:图片上传本地预览插件,改进案例一则。

/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插件网站:http://keleyi.com/keleyi/phtml/image/16.htm *参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法; *使用方法: <div> <img id

jQuery:[1]实现图片上传并预览

jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 File对象 File对象可以用来获取文件的信息,还可以用来读取这个文件的内容,通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的DataTransfer对象. Blob对象 Blob对象是一个包含由只读原始数据的类文件对象,Blob

js实现图片上传及预览----------------------&gt;&gt;兼容ie6-8 火狐以及谷歌

<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> <script src="../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> </head> <body> <form id="f

JS实现图片上传预览效果:方法一

<script type="text/javascript"> //处理file input加载的图片文件 $(document).ready(function(e) { //判断浏览器是否有FileReader接口 if(typeof FileReader =='undefined') { /*$("#images_show").css({'background':'none'}).html('亲,您的浏览器还不支持HTML5的FileReader接口