zoukankan      html  css  js  c++  java
  • 图片上传并显示(兼容ie),图片大小判断

    图片上传并显示(兼容ie),图片大小判断

    HTML

    <div id="swf" style="margin: 0 auto;text-align: center;">
        <img src="/assets/img/default.jpg" height="180px" width="180px"
             id="logoshow">
    </div>
    <div id="headview" style="text-align: center;margin: 0 auto;">
        <input type="file" id="logo" name="logo" style=" 180px;"
               onchange="previewImage(this)">
    </div>
    

    JS

    function previewImage(file){
        var div = document.getElementById('swf');
        if (file.files && file.files[0]) {//HTML5
            var img = document.getElementById('logoshow');
            var reader = new FileReader();
            reader.readAsDataURL(file.files[0]);
            reader.onload = function (evt) {
                img.src = evt.target.result;
                img.style.width= "180px";
            };
        }
        else //兼容IE,滤镜
        {
            alert("filter");
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            file.blur();
            var src = document.selection.createRange().text;
            var img = document.getElementById('logoshow');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            div.innerHTML = "<img id=logoshow style='margin:0px auto;180px;height:180px;" + sFilter + src + ""'>";
        }
    }
    

    JS判断文件大小

    <input id="file" type="file" onchange="filefujianChange(document.getElementById('file'))">
    
    <script type="text/javascript">
    	function filefujianChange(target) {
    		var fileSize = 0;         
    		if (!target.files) {     
    			var filePath = target.value;     
    			var fileSystem = new ActiveXObject("Scripting.FileSystemObject");        
    			var file = fileSystem.GetFile (filePath);     
    			fileSize = file.Size;    
    		} else {    
    			fileSize = target.files[0].size;     
    		}   
    		var size = fileSize / 1024;
    		alert(size);    
    		if(size>2000){  
    			alert("附件不能大于2M");
    			target.value="";
    			return
    		}
    		var name=target.value;
    		var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
    		alert(fileName);
    		if(fileName !="jpg" && fileName !="jpeg" && fileName !="pdf" && fileName !="png" && fileName !="dwg" && fileName !="gif" ){
    			alert("请选择图片格式文件上传(jpg,png,gif,dwg,pdf,gif等)!");
    			target.value="";
    			return ;
    		}
    	}
    </script>
  • 相关阅读:
    加入页面切换动画, 避免冷启动
    Spark Shuffle模块——Suffle Read过程分析
    java使用线程请求訪问每次间隔10分钟连续5次,之后停止请求
    二叉排序树(BST)构造与应用
    L贪心基础
    leetcode笔记:Ugly Number II
    Android API Guides---Layouts
    红外目标图像中阈值切割方法的比較与研究
    IOS开发证书变成“此证书的签发者无效”解决方法
    Web前端开发规范收集
  • 原文地址:https://www.cnblogs.com/dawnheaven/p/5624935.html
Copyright © 2011-2022 走看看