图片及时上传预览判断大小 /*添加了一些判断*/

function setImagePreview(dom,size,larger) {
        
        var x = 200;
        var y = 150;
        if(larger){
             x = 100;
             y = 75;
        }
        var docObj=dom;
        var imgObjPreview=$(dom).parent().find("img")[0];
        var val = dom.value.split(".");
       var ext = [‘gif‘, ‘jpg‘, ‘jpeg‘, ‘png‘];
        if (ext.join(",").indexOf(val[val.length-1]) > -1){
                true;
        }else{
            alert("您上传的图片格式不正确,请重新选择!");
            $(dom).val("");
            $(imgObjPreview).attr("src","images/zhong.png");
            return false;
        }
        if(docObj.files &&docObj.files[0]){
            imgObjPreview.style.display = ‘block‘;
            if(docObj.files[0].size>size){
                alert("图片过大!");
                $(dom).val("");
                $(imgObjPreview).attr("src","images/zhong.png");
                return false;
            }
            
            imgObjPreview.style.width = x+"px";
            imgObjPreview.style.height = y+"px";
            imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            
        }
        else{
            docObj.select();
            var imgSrc = document.selection.createRange().text;
            var localImagId = $(dom).siblings("div")[0];
            var img=new Image();
            img.src=imgSrc;
            if(img.readyState=="complete"){
                if(img.fileSize > size){
                    alert("图片过大!");
                    $(localImagId).attr("src","images/zhong.png");
                    return false;
                }
            }else{
            img.onreadystatechange=function(){
            if(img.readyState==‘complete‘){
                if(img.fileSize > size){
                    alert("图片过大!");
                    return false;
                 }else{
                    localImagId.style.width = x+"px";
                    localImagId.style.height = y+"px";
                    try{
                        localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    }
                    catch(e){
                        alert("您上传的图片格式不正确,请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = ‘none‘;
                    document.selection.empty();
                }
                }
              }
             }
             $(dom).siblings("div").eq(0).addClass("tsp");
        }
        return true;
    }

<dt><input type="file" name="" onchange="javascript:setImagePreview(this,1024*1024);" class=‘renzheng‘><img src="images/zhong.png" />
            <input type="hidden" name="" value=‘‘/>
            <label id="company-error" class="error" for="company">公司名至少2位</label>
            <div></div>
            <div class=‘transtion-all change‘>点击更换图片</div>

</dt>

时间: 2024-11-24 18:51:39

图片及时上传预览判断大小 /*添加了一些判断*/的相关文章

图片本地上传预览

在IE里面显示的话,你可以用div直接显示图片,不通过img来添加SRC,这样就不会有小图标出现 例子: <div class="banner_up_pic" id="imgPreDiv"></div> var file_upl = document.getElementById("file"); file_upl.select(); 获取图片路径  var imgpath=document.selection.creat

HTML5图片上传预览

HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. 也就

jQuery插件ImgAreaSelect 实例讲解一(头像上传预览和裁剪功能)

上一节随笔中,我们已经知道了关于jQuery插件ImgAreaSelect基本的知识:那么现在看一下实例: 首先,要知道我们应该实现什么功能? (1)图片能够实现上传预览功能 (2)拖拽裁剪图片,使其能够显示裁剪后的区域 (3)显示要裁剪区域的坐标 其次,该如何引用该插件呢? 那就具体看一下吧! 第一步:先将样式和文件包引入(根据你自己的位置引入) <!--引入imgareaselect的css样式--> <link rel="stylesheet" type=&qu

JavaScript 图片上传预览效果

图片上传预览是一种在图片上传之前对图片进行本地预览的技术.使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验.但随着浏览器安全性的提高,要实现图片上传预览也越来越困难.不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现.例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法.但在opera.safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览.在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享.上次写的简便无刷新文

图片上传预览

例1: 1.先创建一个file表单域,我们需要用它来浏览本地文件. <form name="form1" id="form1" method="post" action="upload.php"> <input type="file" name="file1" id="file1" /> </form> 2.试下效果: 判断文件类型

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

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

js:s上次预览,上传图片预览,图片上传预览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

html,图片上传预览,input file获取文件等相关操作

input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 var path=obj.value;//获取文件当前路径 var size=obj.files[0].size;//获取文件大小 var prefix=path.substring( path.lastIndexOf('\\')+1 );//获取文件名的前缀名(文件格式) var suffix=path.

js前端实现多图图片上传预览

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试页面</title> <script type="text/javascript"> //下面用于