一些前端小东西

图片转为base64 并填入标签内 配合 php 使用 上传图片

js

function transImgbase64()
{
    var img = ".....";// 图片路径  
    var image = new Image();  
    image.src = img;  
    image.onload = function(){  
      var base64 = getBase64Image(image);  
      // 填入标签
      $('#preview1').attr('src',base64);
    }  
    console.log(img);
}
function getBase64Image(img) {  
     var canvas = document.createElement("canvas");  
     canvas.width = img.width;  
     canvas.height = img.height;  
     var ctx = canvas.getContext("2d");  
     ctx.drawImage(img, 0, 0, img.width, img.height);  
     var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();  
     var dataURL = canvas.toDataURL("image/"+ext);  
     return dataURL;  
} 
// data base64数据
public function add_img_file($data)
{
    if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $data, $result)) {//正则获取图片格式
        $type = $result[2];
        $path = '/Uploads/Picture/A1111/' . date('Y-m-d') . '/';
        @chmod(SITE_PATH . $path, 0755);//修改权限
        if (!file_exists(SITE_PATH . $path)) {
            mkdir(SITE_PATH . $path);
        }
        //设置权限
        $new_file = md5(uniqid()) . '.' . $type;//用微秒和会员id产生md5唯一字符串
        if (file_put_contents(SITE_PATH . $path . $new_file, base64_decode(str_replace($result[1], '', $data)))) {
            return $path . $new_file;
        } else {
            return false;
        }
    }
} 

前进后退

<a href="javascript:history.go(-1);" class="btn btn-success">后退</a>
<a href="javascript:history.go(1);" class="btn btn-success">前进</a>

确认提示框

<a href="__URL__/del/id/{$vo.id}" onclick="return del()" class="btn btn-warning btn-xs">删除</a>

<script type="text/javascript">
    function del(){
        if(!confirm("确认要删除?")){
        window.event.returnValue = false;
    }
}
</script>

表单确认提示框

<form action="" method="post" class="pull-right" onsubmit="return checkForm()">
      <input type="text" name="te" value="1">
      <input type="submit" value="收益群发" class="btn btn-default">
</form>

<script type="text/javascript">
    function checkForm() {
        if (window.confirm("确认发送短信吗?")) {
            return true;
        }
        return false;
    }
</script>

jQuery 提供了两种方式来阻止事件冒泡

//方式一:
event.stopPropagation();
$("#div1").mousedown(function(event){
    event.stopPropagation();
});

//方式二:
return false;
$("#div1").mousedown(function(event){
    return false;
});

但是这两种方式是有区别

return false 不仅阻止了事件往上冒泡,而且阻止了事件本身

event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身

场景应用: Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。




导航