zoukankan      html  css  js  c++  java
  • js 上传头像

      

      css 

      

     .con4{ 230px;height: auto;overflow: hidden;margin: 20px auto;color: #FFFFFF;}
    .con4 .btn{ 100%;height: 45px;line-height: 30px;text-align: center;background: #d8b49c;display: block;font-size: 16px;border-radius: 5px;}
    .upload{float: left;position: relative;margin-bottom: 30px;}
    .upload_pic{display: block; 100%;height: 40px;position: absolute;left: 0;top: 0;opacity: 0;border-radius: 5px;}
    #cvs{border: 1px solid #000;margin:20px 0 20px 50px auto;border-radius: 50%;}
    

      HTML

      

        <div class="con4">
            <span class="btn upload">上传头像
    			<input type="file" class="upload_pic" id="upload" />
    		</span>
            <canvas id="cvs" width="100%" height="100%">
            </canvas>
        </div>
    

      js

    var input1 = document.getElementById("upload"); 
     
    if(typeof FileReader==='undefined'){
    	input1.setAttribute('disabled','disabled');
    }else{
    	input1.addEventListener('change',function () {
    		var file = this.files[0];
    		if(!/image/w+/.test(file.type)){
    			alert("文件必须为图片!");
    			return false;
    		}
    		var reader = new FileReader();
    		reader.readAsDataURL(file);
    		reader.onload = function(e){
    
    
    			var image = new Image();
    			image.src = e.target.result;
    			var max=200;
    			image.onload = function(){
    				var canvas = document.getElementById("cvs");
    				var ctx = canvas.getContext("2d");
    				ctx.clearRect(0, 0, canvas.width, canvas.height);
    				ctx.drawImage(image, 0, 0, 200, 200);
    			};
    		}
    	},false);
    }
    

      

  • 相关阅读:
    GridView怪问题,更新时读取不到编辑后的值
    又过了一周
    虚惊一场
    [Joomla] 利用configuration.php存储简单数据
    [Joomla] Phoca Gallery 2.7去版权的方法
    SL还能做什么?
    [Joomla] Joomla 1.5不支持PHP 5.3
    [ecshop] 库项目的添加过程
    [Joomla] 著名CMS系统Joomla的后台图文解说
    了解Joomla
  • 原文地址:https://www.cnblogs.com/BeautifulBoy/p/6923806.html
Copyright © 2011-2022 走看看