评论 - lizhenqiu blog

#⁴⁵⁷

作者：广西河池市宜州市

octobercms数据库使用

//运行select查询
$users = Db::select(‘select * from users where active = ?‘, [1]);
传递给该select方法的第一个参数是原始SQL查询，而第二个参数是需要绑定到查询的任何参数绑定。通常，这些是where子句约束的值。参数绑定提供了针对SQL注入的保护。

该select方法将始终返回一个array结果。数组中的每个结果将是一个PHP stdClass对象，允许您访问结果的值：
foreach ($users as $user) {
    echo $user->name;
}

//使用命名绑定
$results = Db::select(‘select * from users where id = :id‘, [‘id‘ => 1]);

//运行一个insert语句
要执行一个insert语句，你可以使用insert在Db立面上的方法。像这样select，这个方法将原始SQL查询作为第一个参数，绑定作为第二个参数：
Db::insert(‘insert into users (id, name) values (?, ?)‘, [1, ‘Joe‘]);

//运行更新语句
该update方法应用于更新数据库中的现有记录。该语句受影响的行数将由方法返回：
$affected = Db::update(‘update users set votes = 100 where name = ?‘, [‘John‘]);

//运行delete语句
该delete方法应用于从数据库中删除记录。喜欢update，将返回删除的行数：
$deleted = Db::delete(‘delete from users‘);

//运行一般声明
某些数据库语句不应返回任何值。对于这些类型的操作，您可以使用立面上的statement方法Db
Db::statement(‘drop table users‘);

//多个数据库连接
当使用多个连接时，您可以通过立面上的connection方法访问每个连接Db。在name传递给connection方法应该对应于您列出的其中一个连接config/database.php组态文件中
$users = Db::connection(‘foo‘)->select(...);
$pdo = Db::connection()->getPdo();

//数据库事务
Db::transaction(function () {
    Db::table(‘users‘)->update([‘votes‘ => 1]);

    Db::table(‘posts‘)->delete();
});

//手动使用交易
如果您想手动开始事务并完全控制回滚和提交，您可以使用立面上的beginTransaction方法Db：
Db::beginTransaction();
您可以通过以下rollBack方法回滚事务：
Db::rollBack();
最后，您可以通过以下commit方法提交事务：
Db::commit();

//数据库事件
如果要接收应用程序执行的每个SQL查询，可以使用该listen方法。此方法对于记录查询或调试很有用。
Db::listen(function($sql, $bindings, $time) {
    //
});

//查询记录
启用查询日志记录时，将记录所有已为当前请求运行的查询的内存。调用该enableQueryLog方法启用此功能
Db::connection()->enableQueryLog();
要获取执行查询的数组，可以使用以下getQueryLog方法：
$queries = Db::getQueryLog();
然而，在某些情况下，例如当插入大量行时，这可能导致应用程序使用多余的内存。要禁用日志，您可以使用以下disableQueryLog方法：
Db::connection()->disableQueryLog();

Run code

Cut to clipboard

检索结果

//从表中检索所有行--get来看一下表中的所有记录
$users = Db::table(‘users‘)->get();
//通过访问列作为对象的属性来访问每列的值：
foreach ($users as $user) {
    echo $user->name;
}
//从表中检索单个行/列
$user = Db::table(‘users‘)->where(‘name‘, ‘John‘)->first();
echo $user->name;
//如果您甚至不需要整行，您可以使用该value方法从记录中提取单个值。此方法将直接返回列的值：
$email = Db::table(‘users‘)->where(‘name‘, ‘John‘)->value(‘email‘);
//分块结果从一张桌子
Db::table(‘users‘)->chunk(100, function($users) {
    foreach ($users as $user) {
        //
    }
});
//您可以通过以下方式返回false来阻止进一步处理的块Closure：
Db::table(‘users‘)->chunk(100, function($users) {
    // Process the records...

    return false;
});
//检索列值列表
//如果要检索包含单列值的数组，则可以使用该lists方法
$titles = Db::table(‘roles‘)->lists(‘title‘);

foreach ($titles as $title) {
    echo $title;
}

//您还可以为返回的数组指定自定义键列：
$roles = Db::table(‘roles‘)->lists(‘title‘, ‘name‘);

foreach ($roles as $name => $title) {
    echo $title;
}

//骨料
$users = Db::table(‘users‘)->count();
$price = Db::table(‘orders‘)->max(‘price‘);
$price = Db::table(‘orders‘)
    ->where(‘is_finalized‘, 1)
    ->avg(‘price‘);

//选择
$users = Db::table(‘users‘)->select(‘name‘, ‘email as user_email‘)->get();
//该distinct方法允许您强制查询返回不同的结果：
$users = Db::table(‘users‘)->distinct()->get();

$query = Db::table(‘users‘)->select(‘name‘);
$users = $query->addSelect(‘age‘)->get();
//原始表达式
$users = Db::table(‘users‘)
    ->select(Db::raw(‘count(*) as user_count, status‘))
    ->where(‘status‘, ‘<>‘, 1)
    ->groupBy(‘status‘)
    ->get();
//加盟
$users = Db::table(‘users‘)
    ->join(‘contacts‘, ‘users.id‘, ‘=‘, ‘contacts.user_id‘)
    ->join(‘orders‘, ‘users.id‘, ‘=‘, ‘orders.user_id‘)
    ->select(‘users.*‘, ‘contacts.phone‘, ‘orders.price‘)
    ->get();
$users = Db::table(‘users‘)
    ->leftJoin(‘posts‘, ‘users.id‘, ‘=‘, ‘posts.user_id‘)
    ->get();
Db::table(‘users‘)
    ->join(‘contacts‘, function ($join) {
        $join->on(‘users.id‘, ‘=‘, ‘contacts.user_id‘)->orOn(...);
    })
    ->get();
Db::table(‘users‘)
    ->join(‘contacts‘, function ($join) {
        $join->on(‘users.id‘, ‘=‘, ‘contacts.user_id‘)
            ->where(‘contacts.user_id‘, ‘>‘, 5);
    })
    ->get();
//where子句
$users = Db::table(‘users‘)->where(‘votes‘, ‘=‘, 100)->get();
$users = Db::table(‘users‘)->where(‘votes‘, 100)->get();
$users = Db::table(‘users‘)
    ->where(‘votes‘, ‘>=‘, 100)
    ->get();

$users = Db::table(‘users‘)
    ->where(‘votes‘, ‘<>‘, 100)
    ->get();

$users = Db::table(‘users‘)
    ->where(‘name‘, ‘like‘, ‘T%‘)
    ->get();
//“或”声明
$users = Db::table(‘users‘)
    ->where(‘votes‘, ‘>‘, 100)
    ->orWhere(‘name‘, ‘John‘)
    ->get();
//“之间”之间的陈述
$users = Db::table(‘users‘)
    ->whereBetween(‘votes‘, [1, 100])->get();
$users = Db::table(‘users‘)
    ->whereNotBetween(‘votes‘, [1, 100])
    ->get();
//“在哪里”声明
$users = Db::table(‘users‘)
    ->whereIn(‘id‘, [1, 2, 3])
    ->get();
$users = Db::table(‘users‘)
    ->whereNotIn(‘id‘, [1, 2, 3])
    ->get();
//“null”语句
$users = Db::table(‘users‘)
    ->whereNull(‘updated_at‘)
    ->get();
$users = Db::table(‘users‘)
    ->whereNotNull(‘updated_at‘)
    ->get();

//排序
$users = Db::table(‘users‘)
    ->orderBy(‘name‘, ‘desc‘)
    ->get();
//分组
$users = Db::table(‘users‘)
    ->groupBy(‘account_id‘)
    ->having(‘account_id‘, ‘>‘, 100)
    ->get();
//该havingRaw方法可用于将原始字符串设置为having子句的值。例如，我们可以找到销售额超过$ 2,500的所有部门：
$users = Db::table(‘orders‘)
    ->select(‘department‘, Db::raw(‘SUM(price) as total_sales‘))
    ->groupBy(‘department‘)
    ->havingRaw(‘SUM(price) > 2500‘)
    ->get();
//限制和抵消
//要限制从查询返回的结果数，或者在查询（OFFSET）中跳过给定数量的结果，可以使用skip和take方法：
$users = Db::table(‘users‘)->skip(10)->take(5)->get();

//插入
Db::table(‘users‘)->insert(
    [‘email‘ => ‘john@example.com‘, ‘votes‘ => 0]
);
Db::table(‘users‘)->insert([
    [‘email‘ => ‘taylor@example.com‘, ‘votes‘ => 0],
    [‘email‘ => ‘dayle@example.com‘, ‘votes‘ => 0]
]);
//自动递增ID
$id = Db::table(‘users‘)->insertGetId(
    [‘email‘ => ‘john@example.com‘, ‘votes‘ => 0]
);
//更新
Db::table(‘users‘)
    ->where(‘id‘, 1)
    ->update([‘votes‘ => 1]);
//递增/递减
Db::table(‘users‘)->increment(‘votes‘);
Db::table(‘users‘)->increment(‘votes‘, 5);
Db::table(‘users‘)->decrement(‘votes‘);
Db::table(‘users‘)->decrement(‘votes‘, 5);
Db::table(‘users‘)->increment(‘votes‘, 1, [‘name‘ => ‘John‘]);
//删除
Db::table(‘users‘)->delete();
Db::table(‘users‘)->where(‘votes‘, ‘<‘, 100)->delete();
Db::table(‘users‘)->truncate();
//悲观锁定
Db::table(‘users‘)->where(‘votes‘, ‘>‘, 100)->sharedLock()->get();
Db::table(‘users‘)->where(‘votes‘, ‘>‘, 100)->lockForUpdate()->get();

//缓存查询
//持久缓存
$users = Db::table(‘users‘)->remember(10)->get();
//内存缓存
Db::table(‘users‘)->get(); // Result from database
Db::table(‘users‘)->get(); // Result from database
Model::all(); // Result from database
Model::all(); // Result from in-memory cache
//您可以使用enableDuplicateCache或disableDuplicateCache方法启用或禁用重复缓存
Db::table(‘users‘)->enableDuplicateCache()->get();
//如果查询存储在缓存中，则当使用insert，update，delete或truncate语句时，它将自动被清除。但是您可以使用该flushDuplicateCache方法手动清除缓存
Db::table(‘users‘)->enableDuplicateCache()->get();

Run code

Cut to clipboard

models：

//介绍
plugins/
  acme/
    blog/
      models/
        user/             <=== Model config directory
          columns.yaml    <=== Model config files
          fields.yaml     <==^
        User.php          <=== Model class
      Plugin.php
//定义模型
namespace Acme\Blog\Models;
use Model;
class Post extends Model
{
    /**
     * The table associated with the model.
     *
     * @var string
     */
    protected $table = ‘acme_blog_posts‘;
}
//支持的属性
class User extends Model
{
    protected $primaryKey = ‘id‘;
    public $exists = false;
    protected $dates = [‘last_seen_at‘];
    public $timestamps = true;
    protected $jsonable = [‘permissions‘];
    protected $guarded = [‘*‘];
}
//首要的关键
class Post extends Model
{
    /**
     * The primary key for the model.
     *
     * @var string
     */
    protected $primaryKey = ‘id‘;
}
//时间戳
class Post extends Model
{
    /**
     * Indicates if the model should be timestamped.
     *
     * @var bool
     */
    public $timestamps = false;
}
//如果您需要自定义时间戳的格式，请设置$dateFormat模型上的属性。此属性确定日期属性如何存储在数据库中，以及当模型序列化为数组或JSON时的格式：
class Post extends Model
{
    /**
     * The storage format of the model‘s date columns.
     *
     * @var string
     */
    protected $dateFormat = ‘U‘;
}
//值存储为JSON
class Post extends Model
{
    /**
     * @var array Attribute names to encode and decode using JSON.
     */
    protected $jsonable = [‘data‘];
}
//访问列值
foreach ($flights as $flight) {
    echo $flight->name;
}
//添加附加约束
$flights = Flight::where(‘active‘, 1)
    ->orderBy(‘name‘, ‘desc‘)
    ->take(10)
    ->get();
//集合
foreach ($flights as $flight) {
    echo $flight->name;
}
//分块结果
Flight::chunk(200, function ($flights) {
    foreach ($flights as $flight) {
        //
    }
});
//检索单个模型
// Retrieve a model by its primary key
$flight = Flight::find(1);

// Retrieve the first model matching the query constraints
$flight = Flight::where(‘active‘, 1)->first();

//找不到例外
$model = Flight::findOrFail(1);
$model = Flight::where(‘legs‘, ‘>‘, 100)->firstOrFail();

Route::get(‘/api/flights/{id}‘, function ($id) {
    return Flight::findOrFail($id);
});

//检索聚合
$count = Flight::where(‘active‘, 1)->count();
$max = Flight::where(‘active‘, 1)->max(‘price‘);

//基本插入
$flight = new Flight;
$flight->name = ‘Sydney to Canberra‘;
$flight->save();

//基本更新
$flight = Flight::find(1);
$flight->name = ‘Darwin to Adelaide‘;
$flight->save();
//还可以针对与给定查询匹配的任意数量的模型执行更新。在这个例子中，所有的航班active，有一个destination的San Diego将被标记为延迟：
Flight::where(‘is_active‘, true)
    ->where(‘destination‘, ‘Perth‘)
    ->update([‘delayed‘ => true]);
//质量分配
class Flight extends Model
{
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [‘name‘];
}
//一旦我们赋予了属性质量分配，我们可以使用该create方法在数据库中插入新的记录。该create方法返回保存的模型实例：
$flight = Flight::create([‘name‘ => ‘Flight 10‘]);

//其他创作方法
$flight = Flight::make([‘name‘ => ‘Flight 10‘]);

// Functionally the same as...
$flight = new Flight;
$flight->fill([‘name‘ => ‘Flight 10‘]);

// Retrieve the flight by the attributes, otherwise create it
$flight = Flight::firstOrCreate([‘name‘ => ‘Flight 10‘]);

// Retrieve the flight by the attributes, or instantiate a new instance
$flight = Flight::firstOrNew([‘name‘ => ‘Flight 10‘]);

//删除模型
$flight = Flight::find(1);
$flight->delete();

//按键删除现有的模型
Flight::destroy(1);
Flight::destroy([1, 2, 3]);
Flight::destroy(1, 2, 3);

//通过查询删除模型
$deletedRows = Flight::where(‘active‘, 0)->delete();

//查询范围
class User extends Model
{
    /**
     * Scope a query to only include popular users.
     */
    public function scopePopular($query)
    {
        return $query->where(‘votes‘, ‘>‘, 100);
    }

    /**
     * Scope a query to only include active users.
     */
    public function scopeActive($query)
    {
        return $query->where(‘is_active‘, 1);
    }
}

//利用查询范围
$users = User::popular()->active()->orderBy(‘created_at‘)->get();

//动态范围
class User extends Model
{
    /**
     * Scope a query to only include users of a given type.
     */
    public function scopeApplyType($query, $type)
    {
        return $query->where(‘type‘, $type);
    }
}

//现在您可以在调用范围时传递参数：
$users = User::applyType(‘admin‘)->get();

Run code

Cut to clipboard

文章：OctoberCms学习笔记中文文档翻译发表时间：2018-08-07, 09:21:33

展开↯

#⁴⁵⁸

作者：广西河池市宜州市

使Nginx服务器支持.htaccess的方法
nginx可以include任何文件，而不仅仅是.htaccess
在 nginx/nginx.conf的server{}中引入 .htaccess 文件:

include /vhosts/quany.info/.htaccess;

Run code

Cut to clipboard

文章：OctoberCms学习笔记中文文档翻译发表时间：2018-08-07, 09:16:25

展开↯

#⁴⁵⁹

作者：广西河池市宜州市

画布大小，点哪边留哪边

如图，将向上裁剪，底部图片内容不变，顶部图片被裁剪

#,广西河池市宜州市,2018-08-02,16:02:17, 左右正好相反哦

文章：常用代码2 发表时间：2018-08-02, 15:50:04

展开↯

#⁴⁶⁰

作者：广西河池市宜州市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-08-02, 11:44:32

展开↯

#⁴⁶¹

作者：广西河池市宜州市

解决CentOS7关闭/开启防火墙出现Unit iptables.service failed to load: No such file or directory.

CentOS7中执行
service iptables start/stop
会报错Failed to start iptables.service: Unit iptables.service failed to load: No such file or directory.

在CentOS 7或RHEL 7或Fedora中防火墙由firewalld来管理，

如果要添加范围例外端口如 1000-2000
语法命令如下：启用区域端口和协议组合
firewall-cmd [--zone=<zone>] --add-port=<port>[-<port>]/<protocol> [--timeout=<seconds>]
此举将启用端口和协议的组合。端口可以是一个单独的端口 <port> 或者是一个端口范围 <port>-<port> 。协议可以是 tcp 或 udp。
实际命令如下：

添加
firewall-cmd --zone=public --add-port=80/tcp --permanent （--permanent永久生效，没有此参数重启后失效）

firewall-cmd --zone=public --add-port=1000-2000/tcp --permanent

重新载入
firewall-cmd --reload
查看
firewall-cmd --zone=public --query-port=80/tcp
删除
firewall-cmd --zone=public --remove-port=80/tcp --permanent

当然你可以还原传统的管理方式。

执行一下命令：

systemctl stop firewalld
systemctl mask firewalld

并且安装iptables-services：
yum install iptables-services

设置开机启动：
systemctl enable iptables

systemctl stop iptables
systemctl start iptables
systemctl restart iptables
systemctl reload iptables

保存设置：
service iptables save

OK，再试一下应该就好使了

开放某个端口在/etc/sysconfig/iptables里添加

-A RH-Firewall-1-INPUT -m state --state NEW -m tcp -p tcp --dport 8080 -j ACCEPT

#,广西河池市宜州市,2018-08-01,10:18:13,
输入 service iptables restart
Redirecting to /bin/systemctl restart iptables.service
Failed to restart iptables.service: Unit not found.
被完美解决！！！

#,广西河池市宜州市,2018-08-01,10:18:26,
“ 查看 firewall-cmd --zone= public --query-port=80/tcp ” 这个语句输入后报错 “ usage: see firewall-cmd man page firewall-cmd: error: unrecognized arguments: public ” 将语句修改为 “ firewall-cmd --query-port=80/tcp ” 后可以使用

#,广西河池市宜州市,2018-08-01,10:18:44, Failed to start iptables.service: Unit not found. 这个错误也可以解决...

文章：LINUX安装NGINX笔记发表时间：2018-08-01, 10:17:50

展开↯

#⁴⁶²

作者：广西河池市宜州市

Nginx启动SSL功能，并进行功能优化

1.1 Nginx如果未开启SSL模块，配置Https时提示错误

nginx: [emerg] the "ssl" parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:37

Run code

Cut to clipboard

原因也很简单，nginx缺少http_ssl_module模块，编译安装的时候带上--with-http_ssl_module配置就行了，但是现在的情况是我的nginx已经安装过了，怎么添加模块，其实也很简单，往下看：做个说明：我的nginx的安装目录是/usr/local/nginx这个目录，我的源码包在/usr/local/src/nginx-1.6.2目录

1.2 Nginx开启SSL模块
切换到源码包：

cd /usr/local/src/nginx-1.11.3

Run code

Cut to clipboard

查看nginx原有的模块

/usr/local/nginx/sbin/nginx -V

Run code

Cut to clipboard

在configure arguments:后面显示的原有的configure参数如下：

--prefix=/usr/local/nginx --with-http_stub_status_module

Run code

Cut to clipboard

那么我们的新配置信息就应该这样写：

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

Run code

Cut to clipboard

运行上面的命令即可，等配置完

配置完成后，运行命令

make

Run code

Cut to clipboard

这里不要进行make install，否则就是覆盖安装

然后备份原有已安装好的nginx

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

Run code

Cut to clipboard

然后将刚刚编译好的nginx覆盖掉原有的nginx（这个时候nginx要停止状态）

cp ./objs/nginx /usr/local/nginx/sbin/

Run code

Cut to clipboard

然后启动nginx，仍可以通过命令查看是否已经加入成功

/usr/local/nginx/sbin/nginx -V

Run code

Cut to clipboard

Nginx 配置Http和Https共存

server {
            listen 80 default backlog=2048;
            listen 443 ssl;
            server_name wosign.com;
            root /var/www/html;
  
            ssl_certificate /usr/local/Tengine/sslcrt/ wosign.com.crt;
            ssl_certificate_key /usr/local/Tengine/sslcrt/ wosign.com .Key;
        }

Run code

Cut to clipboard

把ssl on；这行去掉，ssl写在443端口后面。这样http和https的链接都可以用

Nginx 配置SSL安全证书重启避免输入密码
可以用私钥来做这件事。生成一个解密的key文件，替代原来key文件。

openssl rsa -in server.key -out server.key.unsecure

Run code

Cut to clipboard

Nginx SSL性能调优

ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES256-SHA384:AES256-SHA256:RC4:HIGH:!MD5:!aNULL:!eNULL:!NULL:!DH:!EDH:!AESGCM;
ssl_prefer_server_ciphers on;
ssl_session_cache shared:SSL:10m;
ssl_session_timeout 10m;

Run code

Cut to clipboard

Nginx 配置Http跳转Https

server {
    listen 80;
    server_name www.域名.com;
    rewrite ^(.*) https://$server_name$1 permanent;
}
server {
    listen 443;
    server_name www.域名.com;
    root /home/www;
    ssl on;
    ssl_certificate /etc/nginx/certs/server.crt;
    ssl_certificate_key /etc/nginx/certs/server.key;
}

Run code

Cut to clipboard

文章：LINUX安装NGINX笔记发表时间：2018-08-01, 10:16:12

展开↯

#⁴⁶³

作者：广西河池市宜州市

https服务器配置、nginx配置、系统的443端口检查和开启

查看了所运行的端口
>

netstat -anp

Run code

Cut to clipboard

（如果发现端口没有443）,说明该端口防火墙没有配置到，所以也不能进行代理的操作；及没有找到下面这个

解决办法：
进入防火墙配置文件看看了
vim /etc/sysconfig/iptables
// 看看有没有443的文件,没有的话在改文件中添加下面这行
>-A INPUT -m state --state NEW -m tcp -p tcp --dport 443 -j ACCEPT

再次注意，
>-A INPUT -j REJECT –reject-with icmp-host-prohibited
添加的新的那句需要在这句的前面，否则443端口也有问题

#,广西河池市宜州市,2018-08-01,10:06:41, 特别提示：很多网友把这两条规则添加到防火墙配置的最后一行，导致防火墙启动失败，正确的应该是添加到默认的22端口这条规则的下面

原因是这条规则的作用是拒绝所有-j REJECT 在iptables帮助文档里面有一下说明This is used to send back an error packet in response to the matched packet

就是表明拒绝你，并返回一个错误连接信息。请求没到nginx那，肯定没有状态码返回，同时你的浏览器返回的只能是无法连接。

#,广西河池市宜州市,2018-08-01,10:07:11, 被netstat -anp 出来的内容欺骗了，规则是添加了，但是没起效果。
如果返回404，403等等，那说明是nginx的配置等因素；

#,广西河池市宜州市,2018-08-01,10:09:03, /usr/local/nginx/sbin/nginx -s reload 时报invalid PID number报错

/usr/local/nginx/sbin/nginx -s reload

nginx: [error] invalid PID number "" in "/usr/local/nginx/logs/nginx.pid"

解决方法：

 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf



使用nginx -c的参数指定nginx.conf文件的位置
 
[root@localhost nginx]# cd logs/
[root@localhost logs]# ll
总用量 12
-rw-r--r-- 1 root root 1246 12月  9 18:10 access.log
-rw-r--r-- 1 root root  516 12月 10 15:39 error.log
-rw-r--r-- 1 root root    5 12月 10 15:38 nginx.pid
 
看nginx.pid文件已经有了

Run code

Cut to clipboard

文章：LINUX安装NGINX笔记发表时间：2018-08-01, 09:57:51

展开↯

#⁴⁶⁴

作者：广西河池市宜州市

HTML5实现图形挤压变形效果DEMO

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>HTML5实现图形挤压变形效果DEMO演示</title>

<style>
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}body {
  background: #000;
}

.zone {
  width: 800px;
  height: 600px;
  background: #000;
  margin: auto;
  -webkit-filter: blur(15px) saturate(800%);
          filter: blur(15px) saturate(800%);
  cursor: none;
}
.zone .blob {
  width: 90px;
  height: 67.5px;
  margin: 20px 20px;
  background: red;
  float: left;
  border-radius: 100%;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.zone .repulse {
  width: 90px;
  height: 67.5px;
  background: lightblue;
  display: block;
  position: absolute;
  border-radius: 100%;
  -webkit-filter: saturate(600%);
          filter: saturate(600%);
}
</style>

</head>

<body>

  <div class="zone">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>

  <span class="repulse"></span>
</div>

  <script src='https://lizhenqiu.com/templates/default/jquery.min.js'></script>

  <script>$(document).on('mousemove', function(e){
    $('.repulse').css({
       left:  e.pageX,
       top:   e.pageY
    });
});</script>

</body>

</html>

Run code

Cut to clipboard

文章：常用代码2 发表时间：2018-08-01, 09:55:31

展开↯

#⁴⁶⁵

作者：广西河池市宜州市

js各种获取当前窗口页面宽度、高度的方法

alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
 
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度

Run code

Cut to clipboard

文章：常用代码2 发表时间：2018-07-30, 09:28:41

展开↯

#⁴⁶⁶

作者：广西河池市宜州市

404数字动画页面特效果变化增加

文章：404创意动画闪动页面发表时间：2018-07-26, 16:43:58

展开↯

#⁴⁶⁷

作者：广西河池市宜州市

鼠标移动星星jq代码跟随鼠标移动

(function() {
	var N;
	$(function() {
		
		window.giffy_bp_0013 = {
			canvas: null,
			ball: [],
			ballImageResource: [],
			subBall: [],
			subBallImageResource: [],
			actionCount: [],
			timerId: null,
			waitCnt: 0,
			curBallIdx: 0,
			mouseX: 0,
			mouseY: 0,
			init: function() {
				for (i = 0; i < 1; i++) {
					var j = "/mouse_star/subball" + (i + 1) + ".png";
					giffy_bp_0013.ballImageResource[i] = new Image;
					giffy_bp_0013.ballImageResource[i].src = j
				}
				for (i = 0; i < 8; i++) j = "/mouse_star/subball" + (i + 1) + ".png", giffy_bp_0013.subBallImageResource[i] =
					new Image, giffy_bp_0013.subBallImageResource[i].src = j;
				for (i = 0; i < 20; i++) {
					giffy_bp_0013.ball[i] = $("<div />", {
						id: "giffy_bp_0013_ball_" + i,
						no: i,
						css: {
							position: "absolute",
							visibility: "hidden",
							zIndex: "10000"
						},
						html: "",
						click: function() {}
					}).appendTo("body");
					giffy_bp_0013.subBall[i] = [];
					for (n = 0; n < 3; n++) giffy_bp_0013.subBall[i][n] = $("<div />", {
						id: "giffy_bp_0013_subball_" + i + "_" + n,
						no: i,
						subno: n,
						css: {
							position: "absolute",
							visibility: "hidden",
							zIndex: "10000"
						},
						html: "",
						click: function() {}
					}).appendTo("body");
					giffy_bp_0013.actionCount[i] =
						0
				}
				$("html").mousemove(function(j) {
					giffy_bp_0013.mouseX = j.pageX;
					giffy_bp_0013.mouseY = j.pageY;
					if (giffy_bp_0013.waitCnt == 0 && giffy_bp_0013.actionCount[giffy_bp_0013.curBallIdx] == 0) giffy_bp_0013.waitCnt = 2, giffy_bp_0013.actionCount[giffy_bp_0013.curBallIdx] = 1, giffy_bp_0013.curBallIdx = giffy_bp_0013.curBallIdx == 19 ? 0 : giffy_bp_0013.curBallIdx + 1
				});
				timerId = setInterval("giffy_bp_0013.action()", 50)
			},
			action: function() {
				for (i = 0; i < 20; i++) switch (giffy_bp_0013.actionCount[i]) {
					case 1:
						var j = giffy_bp_0013.ballImageResource[giffy_bp_0013.getRandomNum(1)];
						giffy_bp_0013.ball[i].css({
							background: "url(" + j.src + ") no-repeat",
							height: j.height,
							width: j.width
						});
						giffy_bp_0013.move(giffy_bp_0013.ball[i], {
							top: giffy_bp_0013.mouseY + 10,
							left: giffy_bp_0013.mouseX + 10
						});
						giffy_bp_0013.animateY(giffy_bp_0013.ball[i], giffy_bp_0013.mouseY, 100, "swing", function() {
							giffy_bp_0013.actionCount[$(this).attr("no")] = 2
						});
						giffy_bp_0013.setVisible(giffy_bp_0013.ball[i]);
						giffy_bp_0013.actionCount[i] = 0;
						break;
					case 2:
						giffy_bp_0013.setHidden(giffy_bp_0013.ball[i]);
						var l = giffy_bp_0013.ball[i].position();
						for (n = 0; n < 3; n++) giffy_bp_0013.move(giffy_bp_0013.subBall[i][n], l), giffy_bp_0013.animateRandomXY(giffy_bp_0013.subBall[i][n], l.left - 30, l.left + 30, l.top, l.top + 30, 200, "swing", function() {
							$(this).attr("subno") == 2 && (giffy_bp_0013.actionCount[$(this).attr("no")] = 3)
						}), j = giffy_bp_0013.subBallImageResource[giffy_bp_0013.getRandomNum(8)], giffy_bp_0013.subBall[i][n].css({
							background: "url(" + j.src + ") no-repeat",
							height: j.height,
							width: j.width
						}), N || giffy_bp_0013.setOpacity(giffy_bp_0013.subBall[i][n], 1), giffy_bp_0013.setVisible(giffy_bp_0013.subBall[i][n]);
						giffy_bp_0013.actionCount[i] = 0;
						break;
					case 3:
						for (n = 0; n < 3; n++) l = giffy_bp_0013.subBall[i][n].position(), N ? giffy_bp_0013.animateRandomXY(giffy_bp_0013.subBall[i][n], l.left, l.left, l.top + 10, l.top + 50, 1E3, "linear", function() {
							$(this).attr("subno") == 2 && (giffy_bp_0013.actionCount[$(this).attr("no")] = 4)
						}) : giffy_bp_0013.animateRandomXYFadeout(giffy_bp_0013.subBall[i][n], l.left, l.left, l.top + 10, l.top + 50, 1E3, "linear", function() {
							$(this).attr("subno") == 2 && (giffy_bp_0013.actionCount[$(this).attr("no")] = 4)
						});
						giffy_bp_0013.actionCount[i] =
							0;
						break;
					case 4:
						for (n = 0; n < 3; n++) giffy_bp_0013.setHidden(giffy_bp_0013.subBall[i][n]);
						giffy_bp_0013.actionCount[i] = 0
				}
				giffy_bp_0013.waitCnt > 0 && giffy_bp_0013.waitCnt--
			},
			getRandomNum: function(j) {
				return Math.floor(Math.random() * j)
			},
			move: function(j, l) {
				j.css({
					top: l.top,
					left: l.left
				})
			},
			moveViewTop: function(j) {
				j.css({
					top: giffy_bp_0013.getViewTop()
				})
			},
			moveViewBottom: function(j) {
				j.css({
					top: giffy_bp_0013.getViewBottom() - j.outerHeight()
				})
			},
			moveViewLeft: function(j) {
				j.css({
					left: giffy_bp_0013.getViewLeft()
				})
			},
			moveViewRight: function(j) {
				j.css({
					left: giffy_bp_0013.getViewRight() - j.outerWidth()
				})
			},
			moveViewTopLeft: function(j) {
				giffy_bp_0013.moveViewTop(j);
				giffy_bp_0013.moveViewLeft(j)
			},
			moveViewTopRight: function(j) {
				giffy_bp_0013.moveViewTop(j);
				giffy_bp_0013.moveViewRight(j)
			},
			moveViewBottomLeft: function(j) {
				giffy_bp_0013.moveViewBottom(j);
				giffy_bp_0013.moveViewLeft(j)
			},
			moveViewBottomRight: function(j) {
				giffy_bp_0013.moveViewBottom(j);
				giffy_bp_0013.moveViewRight(j)
			},
			moveRandomTop: function(j) {
				j.css({
					top: giffy_bp_0013.getViewTop() + giffy_bp_0013.getRandomNum(giffy_bp_0013.getViewHeight() - j.outerHeight())
				})
			},
			moveRandomLeft: function(j) {
				j.css({
					left: giffy_bp_0013.getViewLeft() + giffy_bp_0013.getRandomNum(giffy_bp_0013.getViewWidth() - j.outerWidth() - 100)
				})
			},animateY: function(j, l, q, r, u) {
				j.animate({
					top: l
				}, q, r, u)
			},
			animateRandomY: function(j, l, q, r, u, w) {
				giffy_bp_0013.animateY(j, l + giffy_bp_0013.getRandomNum(q - l), r, u, w)
			},
			animateX: function(j, l, q,
				r, u) {
				j.animate({
					left: l
				}, q, r, u)
			},
			animateRandomX: function(j, l, q, r, u, w) {
				giffy_bp_0013.animateX(j, l + giffy_bp_0013.getRandomNum(q - l), r, u, w)
			},
			animateXY: function(j, l, q, r, u, w) {
				j.animate({
					top: q,
					left: l
				}, r, u, w)
			},
			animateRandomXY: function(j, l, q, r, u, w, z, N) {
				giffy_bp_0013.animateXY(j, l + giffy_bp_0013.getRandomNum(q - l), r + giffy_bp_0013.getRandomNum(u - r), w, z, N)
			},
			animateXYFadeout: function(j, l, q, r, u, w) {
				j.animate({
					top: q,
					left: l,
					opacity: "0"
				}, r, u, w)
			},
			animateRandomXYFadeout: function(j, l, q, r, u, w, z, N) {
				giffy_bp_0013.animateXYFadeout(j,
					l + giffy_bp_0013.getRandomNum(q - l), r + giffy_bp_0013.getRandomNum(u - r), w, z, N)
			},
			setOpacity: function(j, l) {
				j.css({
					opacity: l
				})
			},
			setHidden: function(j) {
				j.css({
					visibility: "hidden"
				})
			},
			setVisible: function(j) {
				j.css({
					visibility: "visible"
				})
			}
		}
	});
	$(document).ready(function() {
		giffy_bp_0013.init()
	})
})();

Run code

Cut to clipboard

图片
mouse_star.rar

文章：常用代码2 发表时间：2018-07-26, 16:31:24

展开↯

#⁴⁶⁸

作者：广西河池市宜州市

解决Gitlab的The remote end hung up unexpectedly错误
在.git\config配置文件中加：

[http] 
postBuffer = 524288000

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-23,16:07:49, .gitignore

#,广西河池市宜州市,2018-07-23,16:08:07,@1,

/databases/
/logfiles/
/新建文件夹/
/cache/
/others/
/wwwroot/u/
/wwwroot/simsun.ttc
/wwwroot/favicon.ico
/wwwroot/新建文件夹/
/wwwroot/images/
/team20180605.sql
/wwwroot20180605.rar
/upload/
/Uploads/
/images/
/Cache/
/布局/
/tx/
/config/config_db.php

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-23,17:20:26, github syncing 很慢

C:\windows\system32\drivers\etc
151.101.72.133	assets-cdn.github.com
151.101.72.133	github.global.ssl.fastly.net
52.74.223.119	github.com

http://tool.chinaz.com/dns

Run code

Cut to clipboard

清除本地DNS缓存

@echo off
ipconfig /flushdns

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-25,15:57:17,
git clone , git fetch, git pull和git rebase

Git Pull
pull时，它将会获取远程服务器(你请求的，无论什么分支)上的代码，并且立即合并到你的本地厂库，Pull是一个高等级的请求，默认会支持Fetch和merge的操作，如果不是为了使用上的方便，你可以完全不使用它。

$git checkout localbranch
$git pull origin master
$git branch
master 
*localbranch

Run code

Cut to clipboard

上面的命令会将远程服务器上的master分支合并到localbranch中。

Git Fetch
fetch和pull很相似，只是fetch不会做任何的合并操作。

$git checkout localbranch
$git fetch origin remotebranch
$git branch
master
*localbranch
remotebranch

Run code

Cut to clipboard

因此，fetch指是获取remotebranch,然后创建一个本地copy,你不应该直接对这个copy做任何的操作，而应该应该创建一个本地分支，然后在本地分支上进行工作。

Git Clone
clone将会克隆一个本地厂库，

$cd newfolder
$git clone git@github.com:whatever/something.git
$git branch
*master
remotebranch

Run code

Cut to clipboard

clone会为它被克隆的远程repo创建一个名为“origin”的local repo，并为远程repo的活动分支创建一个本地分支以及远程跟踪分支。

git rebase
这个命令相当的cool,你对当前分支所作的任何改变都被保存到一个临时区域，因此你的分支将会和改变之前一样干净。如果你用git pull -rebase,git将会获取远程的改变，遍历当前本地分支，然后替换你当前分支的所有改动。

如果你在使用过程中遇到了问题，使用

git branch -a

Run code

Cut to clipboard

,它会显示本地厂库的所有分支：本地的，远程的。这是一个很好的杀手锏，请记住，git bracches只是一个pointer。所以为了能够处理这些提交请求，你需要一个本地分支，通过本地分支你可以获取这些提交。

#,广西河池市宜州市,2018-07-25,16:23:28,

#,广西河池市宜州市,2018-07-25,17:09:27,

$ git push origin

上面命令表示，将当前分支推送到origin主机的对应分支。

如果当前分支只有一个追踪分支，那么主机名都可以省略。

$ git push 如果当前分支与多个主机存在追踪关系，那么这个时候-u选项会指定一个默认主机，这样后面就可以不加任何参数使用git push。

$ git push -u origin master 上面命令将本地的master分支推送到origin主机，同时指定origin为默认主机，后面就可以不加任何参数使用git push了。

不带任何参数的git push，默认只推送当前分支，这叫做simple方式。此外，还有一种matching方式，会推送所有有对应的远程分支的本地分支。Git 2.0版本之前，默认采用matching方法，现在改为默认采用simple方式。

文章：GitHub代码管理代码托管发表时间：2018-07-23, 16:07:07

展开↯

#⁴⁶⁹

作者：黑龙江省佳木斯市

你是个有良心的作者，赞一个

#,广西南宁市,2018-07-18,23:48:28,

文章：如何应对华盖创意(视觉中国)的恶意诉讼发表时间：2018-07-18, 23:46:50

展开↯

#⁴⁷⁰

作者：广西南宁市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-18, 23:09:09

展开↯

#⁴⁷¹

作者：广西河池市宜州市

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-18, 17:51:18

展开↯

#⁴⁷²

作者：广西河池市宜州市

win10启动疑难解答
Windows开机启动高级选项 win10进入高级选项
同时按住shit键并点击重启

文章：电脑常用软件收藏推荐收集【持续更新】发表时间：2018-07-18, 17:16:21

展开↯

#⁴⁷³

作者：广西河池市宜州市

国税局异步上传头像

	function uptx(){
			$('.up_buttom').removeAttr('onclick');
			$('.up_buttom').text('正在上传....');
			var formData = new FormData($('#myformup')[0]);
			$.ajax({
				type: "POST",
				url:'/index.php/Members/Uptx/index',
				//data:$('#myformup').serialize(),
				
				cache: false,
				data: new FormData($('#myformup')[0]),
				processData: false,
				contentType: false,
				
				error: function(request) {
					alert('服务器繁忙');
					location.reload();
					return false;
				
				
					//alert("提交失败");
				},
				success: function(data) {
					if(data=='upok'){
						alert('上传修改头像成功');
						location.reload();
						return false;
					}else{
						alert('上传失败');
						location.reload();
						return false;
					
					}
					
				}
			});
	}

Run code

Cut to clipboard

			success: function(data){
				//data=JSON.parse(data);
				//alert(file);
				var upToken=data.upToken;
				var nnaame=data.nnaame;

					var xhr = new XMLHttpRequest(),
					fd = new FormData;

					

					
					xhr.open('POST', 'https://up.qbox.me', true);  // 'url'
					//可以通过progress事件监听上传进度
					
					xhr.onload = function() {
					  // 上传完成
					  //alert(nnaame);
					  $('.watermark').hide();
						if(typestrsff=='video') codeanddd('contentadddd','[testmp4]https://out.img.pan.lizhenqiu.com/'+nnaame+'[/testmp4]');
						else if(typestrsff=='audio') codeanddd('contentadddd','[testmp3]https://out.img.pan.lizhenqiu.com/'+nnaame+'[/testmp3]');
						else if(typestrsff!='image' && nttyyynammmname) codeanddd('contentadddd','[testurl=https://out.img.pan.lizhenqiu.com/'+nnaame+'?download/'+nttyyynammmname+']'+nttyyynammmname+'[/testurl]');
						else codeanddd('contentadddd','[testimg]https://out.img.pan.lizhenqiu.com/'+nnaame+'[/testimg]');
						$('#myCanvasimgpuppmain').hide();
						submitinputtvllsscccc("上传成功！");
						$('#getimgupjinduidd').css({'height':'0px','width':'0px'});
					}
					// 
					
						xhr.upload.onprogress = function (evt) {
							if (evt.lengthComputable) {
							  var percentComplete = Math.round(evt.loaded * 100 / evt.total);
							  //document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
							  //console.log(percentComplete.toString() + '%');
							  $('#submitinputtvllss').text("正在上传.. "+percentComplete.toString() + '%');
							  $('#getimgupjinduidd').css({'height':'100%','width':+percentComplete.toString() + '%'});
							}
							else {
								//console.log('无法计算');
							  //document.getElementById('progressNumber').innerHTML = '无法计算';
							}
						  }
					
						xhr.onerror = function (e){
							/*document.getElementById("myformssssww").submit();
							setTimeout(function(){
								nnntimgetimg();
							},2500);
							return false;*/
							$('#submitinputtvllss').text('该浏览器不支持拖曳上传，请选择文件。');
							alert('该浏览器不支持拖曳上传，请选择文件。');path.click();return false;
						}
					
					
					fd.append('file', file); // 'file'
					fd.append('key', nnaame);
					fd.append('token', upToken);
					xhr.send(fd);
	
			}

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-18,16:40:17,

<!DOCTYPE html>
<html>
<head>
    <title>Upload Files using XMLHttpRequest - Minimal</title>
</head>
<body>
  <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx">
    <div class="row">
      <label for="fileToUpload">Select a File to Upload</label><br>
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();">
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" onclick="uploadFile()" value="Upload">
    </div>
    <div id="progressNumber"></div>
  </form>
  
<script>
function fileSelected() {
  var file = document.getElementById('fileToUpload').files[0];
  if (file) {
    var fileSize = 0;
    if (file.size > 1024 * 1024){
      fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
    }else{
      fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
    }      
    document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
    document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
    document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
  }
}
</script>
  
  
  
  
  
  
  
  
</body>
</html>

Run code

Cut to clipboard

#,广西河池市宜州市,2018-07-18,16:43:21,

var fd = new FormData(document.getElementById('form1'));

Run code

Cut to clipboard

这个构造函数的优点是可以用所有表单填充FormData实例（不必手动完成）

#,广西河池市宜州市,2018-07-18,17:00:26, 数组巧去重new Set

let arr = [1, 2, 2, 3];
let set = new Set(arr);
let newArr = Array.from(set); // Array.from方法可以将 Set 结构转为数组。

console.log(newArr); // [1, 2, 3]

Run code

Cut to clipboard

文章：XMLHttpRequest上传文件实现进度条项目整理发表时间：2018-07-18, 16:38:10

展开↯

#⁴⁷⁴

作者：广西河池市宜州市

AJAX问题之XMLHttpRequest status = 0
为什么是xmlhttp.onreadystatechange = state_Change而不是xmlhttp.onreadystatechange = state_Change();

为的是把整个函数给onreadystatechange，而不是将函数最后处理完的值返回给onreadystatechange

Run code

Cut to clipboard

onreadystatechange是一个事件句柄，同样功能的还有onclick这些，就是有点击事件的时候会进行特定处理，具体看你的函数怎么写了。而onreadystatechange是由readyState触发，readyState存着XMLHttpRequest的状态，

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

readyState改变，调用onreadystatechange这个函数，注意，是这个函数，那我们是不是要赋值一个函数给他，而不是单纯地返回一个值。

#,广西河池市宜州市,2018-07-18,16:36:42, 七牛云存储 - JavaScript SDK 上传示例
XMLHttpRequest 跨域时产生了 OPTIONS 请求
XMLHttpRequest上传文件实现进度条

if (window.XMLHttpRequest) {     //   Mozilla   浏览器                                    //新建XMLHttpRequest对象  
    xmlhttp = new XMLHttpRequest();  
} else if (window.ActiveXObject) {   //   IE   浏览器     
    try {  
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  
    } catch (e) {  
        try {  
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
        } catch (e) { }  
    }  
}

Run code

Cut to clipboard

使用FormData向服务器发送不了数据
你真的会使用XMLHttpRequest吗？
AJAX POST&跨域解决方案 - CORS
进度事件(Progress Events)
OPTIONS 方法在跨域请求（CORS）中的应用
解决错误指定RequestHeader导致后台接受不到FormData数据的问题

xhr文件上传，进度感知
异步上传文件，在很多场景中都有应用。本文介绍一种通过xhr和formdata实现的方法。

FormData属于h5的内容所以，浏览器兼容不是很好，下面是一种polyfill，inspired by francois2metz/html5-formdata

(function(w) {
    if (w.FormData)
        return;
    function FormData() {
        this.boundary = "--------FormData" + Math.random();
        this._fields = [];
    }
    FormData.prototype.append = function(key, value) {
        this._fields.push([key, value]);
    }
    FormData.prototype.toString = function() {
        var boundary = this.boundary;
        var body = "";
        this._fields.forEach(function(field) {
            body += "--" + boundary + "\r\n";
            // file upload
            if (field[1].name) {
                var file = field[1];
                body += "Content-Disposition: form-data; name=\""+ field[0] +"\"; filename=\""+ file.name +"\"\r\n";
                body += "Content-Type: "+ file.type +"\r\n\r\n";
                body += file.getAsBinary() + "\r\n";
            } else {
                body += "Content-Disposition: form-data; name=\""+ field[0] +"\";\r\n\r\n";
                body += field[1] + "\r\n";
            }
        });
        body += "--" + boundary +"--";
        return body;
    }
    w.FormData = FormData;
    var _send = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function(data) {
        if (data instanceof FormData) {
            xhr.setRequestHeader("Content-Type", "multipart/form-data;boundary="+ data.boundary);
            return xhr.sendAsBinary(data.toString());
        }
        return _send.call(this, data);
    };
})(window);

Run code

Cut to clipboard

像这样使用

var data = new FormData();
data.append('file', document.getElementById('file').files[0]);
xhr.open('POST', '/', true);
xhr.onprogress = (function(){
    var progress = 0;
    return function(evt){
        var p = ~~(evt.loaded*1000/evt.total)
        p /= 1000
        if(progress !=== p){
            progress = p
            console.log('progress: ', p)
        }
    }
})();

Run code

Cut to clipboard

关于兼容性，只要支持FieApi就没问题

HTML5利用FormData对象实现显示进度条的文件上传【译】
HTML5利用FormData对象实现显示进度条的文件上传【英】

文章：XMLHttpRequest上传文件实现进度条项目整理发表时间：2018-07-18, 16:28:11

展开↯

#⁴⁷⁵

作者：广西

#,广西,2018-07-18,10:58:11,

文章：@意见反馈/技术支持/伊网/安企网发表时间：2018-07-18, 10:51:21

展开↯

Records:2794 25/148 «‹21 22 23 24 25 26 27 28 29 ›»