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.substring(path.lastIndexOf('.')+1).toLocaleLowerCase(); 
//获取文件名的后缀名（文件格式）并且转换为小写

 

图片上传预览完整代码：

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>上传图片</title>  
<script type="text/javascript">
        //下面用于图片上传预览功能
        function setImagePreview() {
            var obj=document.getElementById("upimage");
            var imgObjPreview=document.getElementById("preview");
            var src=event.target || window.event.srcElement; //获取事件源，兼容chrome/IE
            //下面把路径截取为文件名
            var filename=src.value;//图片完整路径
            var prefix=filename.substring( filename.lastIndexOf('\\')+1 );//获取文件名的前缀名（文件格式）
            var suffix=filename.substring( filename.lastIndexOf('.')+1).toLocaleLowerCase(); //获取文件名的后缀名（文件格式）
            console.log(suffix);
            if(suffix !='jpg' && suffix !='png'){
                alert("图片格式只能为jpg 或者 png");
                obj.outerHTML=obj.outerHTML;//清空选择按钮
                return false;
            }
            if(obj.files && obj.files[0])
            {
                if(obj.files[0].size>2048000){
                    alert("文件超过2M");
                    obj.outerHTML=obj.outerHTML;//清空选择按钮
                    return false;
                }
                //火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '150px';
                imgObjPreview.style.height = '180px';
                console.log(obj.files[0].size);
                    //imgObjPreview.src = obj.files[0].getAsDataURL();

                //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(obj.files[0]);//写入文件流
            }
            else
            {
                obj.select();//IE下，使用滤镜
                var imgSrc = document.selection.createRange().text;//路径
                var localImagId = document.getElementById("imageDiv");
                var img=document.getElementById("preview");
                
                alert(localImagId.fileSize);
//必须设置初始大小
                localImagId.style.width = "150px";
                localImagId.style.height = "180px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
                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();
            }
            return true;
        }

    </script>
</head>  
<body>  
<div id="imageDiv"><img id="preview" src="#"></div>
<form action="upload.do" method="post" enctype="multipart/form-data">  
<input type="file" id="upimage" name="file" onchange="setImagePreview()"/> <input type="submit" value="Submit" /></form>  
</body>  
</html>

 

posted @ 2015-09-06 18:41  黑衣帽子  阅读(1814)  评论(1)  编辑  收藏  举报