用JS在上传前获取图片信息,以前做上传图片的流程是，用户把上传（异步或者常规表单提交）后，用服务端脚本（如php）获得图片信息如

但是现在有一个要求是在用户上传前预览，并判断图片的尺寸，大小和文件类型，如果不正常则返回相应的错误信息。这样比用户上传后才能预览来说体验会更好，同时也能节约服务器的带宽和空间。
以前看过类似的效果，在爱乐活的个人头像编辑上，能做到上传前的预览，不过那是用flash做的，不会flash, 只能js做了。
没有整理，代码比较粗糙和凌乱，只为了方便自己以后实现类似的效果，在ie和非ie浏览器有很多不同的处理,在经验的程序员应该可以看得懂。
（这里的限制为只能上传64X64的PNG图片，部分判断语句不严谨过这不是关键，众所周知，因为安全问题，文件上传最后还是需要服务端验证的。）
以下为文件的代码:
upload.html

 

 
 预览区: 



图片信息:

upload.js

function checkSize(){
    
    var f=document.getElementById("doc"); 
    
    if(ie){

    var img=new Image();//动态创建img
    
    img.src=f.value;
    img.id="temp_img";
    //img.style.display="none";
    
    document.body.appendChild(img);
    alert(img.width);
    
    img.onreadystatechange=function(){

        if(img.readyState=='complete'){//当图片load完毕
        //alert(img.width);
        //alert(img.fileSize);//ie获取文件大小

        }

    }

    //document.body.removeChlid(img);//获取大小结束，移除图片
    
    }
    else{

    var fv=f.files[0].size;//火狐等标准取值办法

    alert(fv);

}

}

//桌面图标上传
function readURL(input) {

               //判断文件类型，非严格               
              if( !input.value.match( /.png/i ) ){        
                alert('图片格式无效！');   
                return false;       
             }            
            var f=document.getElementById("doc"); 
            var img=new Image();//动态创建img            
            img.src=f.value;
            img.id="temp_img";
            img.style.display="none";
            document.body.appendChild(img);
           
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function (e) {                         
                         
                         $('#img_prev').attr('src', e.target.result); 
                         $('#temp_img').attr('src',e.target.result);
                       };
                       
                reader.readAsDataURL(input.files[0]);
                
            } else {
                //IE下，使用滤镜
                var docObj = document.getElementById('doc');
                docObj.select();
                //解决IE9下document.selection拒绝访问的错误
                docObj.blur();
                var imgSrc = document.selection.createRange().text;
                var localImagId = document.getElementById("localImag");
 
                $('#localImag').width(64).height(64); //必须设置初始大小

                //图片异常的捕捉，防止用户修改后缀来伪造图片
                
                try {
                    localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                } catch (e) {
                    alert("您上传的图片格式不正确，请重新选择!"); return false;
                }
                $('#img_prev').hide();
                document.selection.empty();
                 
            }  

            
            var t = setInterval(
                function() {
                    var temp = document.getElementById('temp_img');
                    
                    //取图片大小和尺寸

                    if(temp.width>0){
                        var tWidth = temp.width;
                        var tHeight = temp.height;                        
                        if(temp.fileSize == undefined) {
                             var tSize=f.files[0].size;//火狐等标准取值办法
                        }else {
                            var tSize = temp.fileSize;
                        }
                        var imageInfo = {
                            'size':tSize,
                            'width': tWidth,
                            'height':tHeight
                        };
                        var imgMsg = '图片大小：' + imageInfo.size ;
                        imgMsg +="
图片宽度：" + imageInfo.width;
                        imgMsg +="
图片高度：" + imageInfo.height;
                        $('#imageMsg').html(imgMsg);

                        $(temp).remove();
                        clearInterval(t);
                        if(tWidth != 64 || tHeight !=64) alert('请上传64X64的图片');
                    }                    
                },500
            )
}

源文件：下载