王新阳

CSS3自定义滚动条式样

参考：
https://www.cnblogs.com/ranyonsue/p/9487599.html
https://www.jianshu.com/p/c2addb233acd

.box::-webkit-scrollbar{
  width: 4px;
  height: 1px;
}
.box::-webkit-scrollbar-thumb{
  border-radius: 4px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #555;
}
.box::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #eee;
}

2020-01-13

回应

解决$GLOBALS["HTTP_RAW_POST_DATA"]获取不到数据的问题

转自hpugym的CSDN：https://blog.csdn.net/hpugym/article/details/54969457

昨天在微信中公众号开发中使用$GLOBALS["HTTP_RAW_POST_DATA"]来获取微信公众平台推送过来的post数据，结果惊奇的发现微信号总是提示“该微信公众号暂时无法提供服务”，仔细去检查代码，也没错，可就是无法提供服务。今天又检查了一把，还是没有语法错误，于是乎，我将中间的所有数据全部写到的记事本里去，通过及时本发现$GLOBALS["HTTP_RAW_POST_DATA"]获取的数据是空的。经过资料查找，终于发现了解决的套路：

$GLOBALS ["HTTP_RAW_POST_DATA"]跟$_POST,file_get_contents('php://input') 差不多，用$GLOBALS ["HTTP_RAW_POST_DATA"]或file_get_contents('php://input')的情况大多是为了获取$_POST无法接收的数据类型（如XML数据）

在$GLOBALS ["HTTP_RAW_POST_DATA"]取不到值的情况下可以按以下方式排查：
1、用file_get_contents('php://input')获取数据。如果获取不到，则可能是数据传输错误，对请求进行捉包，分析数据。
2、如果file_get_contents('php://input')有数据。则查看php.ini配置文件。

找到如下,如果没开启则开启

always_populate_raw_post_data = On

注意：这种处理方式是在php版本较低的时候，在php-ini中才有的配置，当版本升级到7，或者更高的时候该机制就被废弃掉了。

下边归纳几种php获取post数据的方式：

RPC 规定接收取值方式 $GLOBALS['HTTP_RAW_POST_DATA'];
PHP默认识别的数据类型是application/x-www.form-urlencoded标准的数据类型。

1、$_POST['paramName']
只能接收Content-Type: application/x-www-form-urlencoded提交的数据，php会将http请求body相应数据会填入到数组$_POST，填入到$_POST数组中的数据是进行urldecode()解析的结果。（其实，除了该Content-Type，还有 multipart/form-data表示数据是表单数据)

2、file_get_contents("php://input")
适用大多数类型的Content-type，php://input 允许读取 POST 的原始数据。和 $HTTP_RAW_POST_DATA 比起来，它给内存带来的压力较小，并且不需要任何特殊的 php.ini 设置。php://input 不能用于 enctype="multipart/form-data"。

3、$GLOBALS['HTTP_RAW_POST_DATA'];
总是产生 $HTTP_RAW_POST_DATA 变量包含有原始的 POST 数据。此变量仅在碰到未识别 MIME 类型的数据时产生。$HTTP_RAW_POST_DATA 对于 enctype="multipart/form-data" 表单数据不可用。

如果post过来的数据不是PHP能够识别的，你可以用 $GLOBALS['HTTP_RAW_POST_DATA']来接收，比如 text/xml 或者 soap 等等。需要设置php.ini中的always_populate_raw_post_data值为On，PHP才会总把POST数据填入变量$http_raw_post_data。

1，Coentent-Type仅在取值为application/x-www-data-urlencoded和multipart/form- data两种情况下，PHP才会将http请求数据包中相应的数据填入全局变量$_POST
2，PHP不能识别的Content-Type类型的时候，会将http请求包中相应的数据填入变量$HTTP_RAW_POST_DATA
3, 只有Coentent-Type不为multipart/form-data的时候，PHP不会将http请求数据包中的相应数据填入php: //input，否则其它情况都会。填入的长度，由Coentent-Length指定。
4，只有Content-Type为application/x-www-data-urlencoded时，php://input数据才跟$_POST数据相一致。
5，php://input数据总是跟$HTTP_RAW_POST_DATA相同，但是php://input 比$HTTP_RAW_POST_DATA更凑效，且不需要特殊设置php.ini
6，PHP会将PATH字段的query_path部分，填入全局变量$_GET。通常情况下，GET方法提交的http请求，body为空。

总之：
1、如果是 application/x-www-form-urlencoded 和 multipart/form-data 格式用 $_POST；
2、如果不能获取的时候比如 text/xml、application/json、soap，使用 file_get_contents('php://input')；

2019-12-30

回应

curl: (35) Unknown SSL protocol error in connection to abc.com:443

出现此错误可能的原因：

1、PHP版本过低，我从php5.6升级到php7.2

2、对于访问https链接，添加跳过验证对等证书和域名

if(strpos(strtolower($url), 'https://')===0){
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //https请求时跳过cURL验证对等证书
  curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); //https请求时跳过cURL验证域名
}

2019-12-24

回应

使用原生JS修改css属性

修改style样式：
1. 通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式；
2. 修改特定元素节点的style内容cssText可以一次性修改多个css属性style.attrName 修改单个属性 attrName的值
3. 通过setAttribute 修改style属性值

<style>
.test {font-size: 30px;color: blue;background-color: blueviolet}
</style>
// html
<div class="test" style="height: 100px;">TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
// js
var testNode = document.getElementsByClassName("test")[0];
var cssTextBtn = document.getElementsByClassName("cssText")[0];
var attributeBtn = document.getElementsByClassName("setAttribute")[0];
var stylesheetBtn = document.getElementsByClassName("stylesheet")[0];
// 1. 修改style样式: 
stylesheetBtn.addEventListener('click', function(e) {
    var stylesheet = document.styleSheets[0];
    stylesheet.cssRules[0].style.backgroundColor = "green";
}, false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click', function(e) {
    testNode.style.cssText = "width: 300px; background-color: red; height: 200px;"
    testNode.style.border = "1px solid black"
}, true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click', function(e) {
    testNode.setAttribute('style', 'width: 400px; background-color: yellow; height: 300px;')
}, false);

2019-10-15

回应

关于运营-提到好多关键点

请输入查看密码：

2019-10-10

回应

基于CC0协议可以免费商用的图片站

http://dy.163.com/v2/article/detail/ECIAUPKG053466AY.html

2019-10-10

回应

隐藏video标签的下载

Chrome/360浏览器极速模式有效

参考：

https://googlechrome.github.io/samples/media/controlslist.html
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/controlsList

除了加 controlslist="nodownload" 还要屏蔽鼠标右键 oncontextmenu="return false;"
最简单的屏蔽，只要使用html5视频此问题目前就无解

2019-10-09

回应

ajax上传-基于html5 FormData的批量文件上传

参考：https://www.cnblogs.com/imwtr/p/5924042.html
转自：https://blog.csdn.net/sinat_34492035/article/details/80477858

不使用FormData，直接用 <input type="file" name="file" multiple> 也可以实现批量上传。本例是ajax方式多个文件同时上传，也可以基于FormData采用ajax循环上传多个文件。更多功能可通过理解下面的原理自行扩展。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{
            list-style:none;
        }
        ul{
            width:700px;
            border:2px solid red;
            padding:10px;
        }
        .clearfix:after{
            display: block;
            content:'';
            overflow: hidden;
            visibility: hidden;
            clear: both;
            height:0;
        }
        .content ul li{
            float:left;
            width:100px;
            height:100px;
            margin:0 10px;
            border:1px solid #ccc;
        }
        .addFile{
            background:url("../img/icon12.png") no-repeat;
            background-position: center center;
        }
        #attach{
            width:100%;
            height:100%;
            opacity:0;
        }
    </style>
</head>

<body>
    <form action="formData_test.php" id="form">
        <div class="content">
            <ul class="clearfix ul-box">
                <li class="addFile">
                    <input type="file" id="attach"  multiple require />
                </li>
            </ul>
        </div>
        <input type="text" name="name"/>
        <input type="text" name="age"/>
        <input type="text" name="sex"/>
        <input type="button" value="上传" class="subBtn"/>
    </form>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    //定义一个数组 把文件数组的值给新数组  对新数组进行操作  然后把新数组传递给后台
    var curFiles = [];
    $("#attach").change(function(){
        var fileArr = $(this)[0].files;
        Array.prototype.push.apply(curFiles, fileArr);
//      var fileArr = this.files;
        console.log(fileArr);
        //这里展示的话  还是用fileArr
        for(var i=0;i<fileArr.length;i++){
            console.log(fileArr[i]);
            var item = fileArr[i];
            var abc=$("<li class='showf'><p style='overflow:hidden;text-overflow:ellipsis; '>文件名:"+item.name+"</p>"+
                    "<p>大小："+(item.size/1024).toFixed(2)+"KB</p></li>");
            $(".ul-box").prepend(abc);
        }
//      fileArr.map(function(item,index,arr){
//          var abc=$("<li><p>文件名:"+item.name+"</p>"+
//                  "<p>大小："+parseInt(item.size/1024)+"KB</p></li>");
//          $(".ul-box").prepend(abc);
//      })

})  
$(".ul-box").on("click",".showf",function(){
    var index = $(".showf").index($(this));
    alert(index);
    var name = $(this).find("p").eq(0).html();
    console.log(curFiles);
//  curFiles = curFiles.filter(function(file) {
//      return file.name != name;
//  });
    curFiles.splice(index,1)
    console.log(curFiles);

    $(this).remove();
})
$(".subBtn").click(function(){
    // 构建FormData对象
    var fd = new FormData($('#form')[0]);
    for (var i = 0, j = curFiles.length; i < j; ++i) {
        fd.append('attach[]', curFiles[i]);
    }

    for(var pair of fd.entries()) {
       console.log(pair[0]+ ', '+ pair[1]); 
    }

    $.ajax({
        url: 'formData_test.php',
        type: 'post',
        data: fd,
        processData: false,
        contentType: false,
        success: function(rs) {
            console.log(rs);
        },
        error: function(err) {
        }
    });
})
</script>

</html>

formData_test.php源码：

<?php
$files = $_FILES['attach'];
var_dump($files);
?>

2019-10-08

回应

上传前图片预览

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<input type="file">
<script>
$('input[type=file]').change(function(){
    var file=this.files[0];
    var reader=new FileReader();
    reader.onload=function(){
        // 通过 reader.result 来访问生成的 DataURL
        var url=reader.result;
        setImageURL(url);
    };
    reader.readAsDataURL(file);
});

var image=new Image();
function setImageURL(url){
    image.src=url;
}
$(image).appendTo($('body'));
</script>

2019-10-08

回应

好久不见-WZJ

请输入查看密码：

2019-10-03

回应

1...12 13 14 15 16 17 18 19 20 21 ...39