王新阳

wangxinyang

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;
}

解决$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');

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

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验证域名
}


使用原生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);


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

请输入查看密码:

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

隐藏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视频此问题目前就无解

<video controls controlslist="nodownload" id="video" src="" oncontextmenu="return false;"></video>

<video controls controlslist="nodownload nofullscreen noremoteplayback" id="video" src=""></video>

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);
?>

上传前图片预览

<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>


好久不见-WZJ

请输入查看密码:
2025-07-10 星期四 农历六月十六