陈佳 – geekman

linux学习之管道符与管道命令

目录：
1、管道符
2、管道命令
3、管道
4、重定向、多命令顺序执行、tee命令、xargs命令

一、管道符
linux中，“|”就是管道符，也叫管道命令操作符，简称管道符。就是将前面一个命令正确标准输出信息，作为下一个命令的标准输入。
其实就是第一个命令的正确标准输出是第二个命令的标准输入，第二个命令的正确标准输出是第三个命令的标准输入，以此类推。
如下图所示：

二、管道命令
http://www.cnblogs.com/lemonbar/archive/2014/08/24/3933390.html
1、grep 分析一行信息，如果匹配，就将该行取出。
（1）参数
-a : 将binary文件以 text文件的方式搜寻数据
-c : 计算找到搜索条件的次数
-i : 忽略大小查找
-n : 输出行号
-v : 去除包含 -v后面条件的那一行
--color = auto : 将查找的关键字加上颜色
（2）例子
grep 'function' *|grep -v 'private'|grep -v '__construct'|grep -v 'checkAuth'|grep -v 'apiLog'|grep -v 'getVerifField'|awk '{print $4}'|less
以上列子等价于
grep ‘funciton’ *|grep -vE 'private|__construct|checkAuth|apiLog|getVerifField'|awk '{print $4}'|less
-E 启用扩展选项
2、awk 一个强大的文本分析工具
（1）参数
-F：指定分隔符。注意一定要大写。
（2）例子
在api_base.txt 中不区分大小写查找包含‘’coupons‘’ 的行，根据空格分隔，并取第一列
grep -i 'coupons' api_base.txt|awk '{print $1}'|less
在api_base.txt 中不区分大小写查找包含‘’coupons‘’ 的行，根据‘’.php‘’分隔，并取第一列
grep -i 'coupons' api_base.txt|awk -F '.php' '{print $1}'|less
2、cut 选取命令。将一段数据经过分析，取出我们想要的。一般选取信息都是针对行来说的。
（1）参数
-d : 后面接分隔符，与-f 一起使用
-f : 将-d取出的数据截取其中的几段。
-c : 以字符为单位取出固定字符区间
（2）例子
截取3-5字节的数据
grep 'coupons' api_base.txt|cut -b 3-5
以：作为分隔符截取第一段
grep 'coupons' api_base.txt|cut -d ':' -f 1
3、sort 排序。可以根据不同类型排序。
（1）参数
-f : 忽略大小。其实是将小写字母转换成大写字母来比较，相当于忽略大小
-b : 忽略最前面的空格符
-M : 以月份的名字来排序
-n : 数字排序
-r : 反向排序
-u : 去重
-t : 分隔符，默认Tab
-k : 与t相关，用分割的哪一段排序
（2）例子
升序排序
[root@shiyong api]# grep 'coupons' api_base.txt|sort
Mkt_coupons.php: function getByUser()
Mkt_coupons.php: function getCouponList()
Mkt_coupons.php: function subUserCouponsChange()
Mkt_coupons.php: function syncCoupons()

降序排序
[root@shiyong api]# grep 'coupons' api_base.txt|sort -r
Mkt_coupons.php: function syncCoupons()
Mkt_coupons.php: function subUserCouponsChange()
Mkt_coupons.php: function getCouponList()
Mkt_coupons.php: function getByUser()

4、unique 去重。重复行只显示一行。
（1）参数
-i : 忽略大小
-c : 计算次数
（2）例子
去重
[root@shiyong api]# grep 'function' api_users.txt|uniq
Shop_user.php: function updateByUserId()
shop_user.php: function updateByUserId()
Vuser.php: function create()
vuser.php: function create()
去重不区分大小写
[root@shiyong api]# grep 'function' api_users.txt|uniq -i
Shop_user.php: function updateByUserId()
Vuser.php: function create()

去重并且计算次数
[root@shiyong api]# grep 'function' api_users.txt|uniq -c
4 Shop_user.php: function updateByUserId()
1 shop_user.php: function updateByUserId()
4 Vuser.php: function create()
1 vuser.php: function create()

去重不区分大小写并且计算次数
[root@shiyong api]# grep 'function' api_users.txt|uniq -c -i
5 Shop_user.php: function updateByUserId()
5 Vuser.php: function create()
5、wc 计算输出信息的整体数据
（1）参数
-l : 统计行数
-w : 统计字数
-m : 统计字符数
（2）例子
grep 'function' api_users.txt|wc
10 30 360
行数单词数总字符数
grep 'function' api_users.txt|wc -l
10
6、tee 双重定向。既输出到屏幕，又可以输出到文件
（1）参数
-a : 追加
（2）例子
[root@shiyong api]# grep 'coupons' api_base.txt|tee test2.txt
Mkt_coupons.php: function syncCoupons()
Mkt_coupons.php: function subUserCouponsChange()
Mkt_coupons.php: function getCouponList()
Mkt_coupons.php: function getByUser()
7、tr 删除或者替换某一段字符串
（1）参数
-d : 删除
-s : 替换
（2）例子
[root@shiyong api]# grep 'coupons' api_base.txt|tr -d 'getByUser'
Mk_coupon.php: funcion ncCoupon()
Mk_coupon.php: funcion ubCouponChan()
Mk_coupon.php: funcion CouponLi()
Mk_coupon.php: funcion ()
[root@shiyong api]# grep 'coupons' api_base.txt|tr -s 'ct' '1111'
Mk1_1oupons.php: fun1ion syn1Coupons()
Mk1_1oupons.php: fun1ion subUserCouponsChange()
Mk1_1oupons.php: fun1ion ge1CouponLis1()
Mk1_1oupons.php: fun1ion ge1ByUser()

这边命令有很多，就不一一来说明了。除了这些，还可以使用col，join，paste，expand 等等。
三、管道
linux中的管道描述的是进程之间是如何通信的，管道可以分为无名管道和命名管道。我平时用的“|”管道符就是无名管道。

四、延伸知识点
1、重定向
linux重定向与文件描述符（FD）有关。shell中FD通常有10个，0~9；
常用的FD有3个：
0：标准输入（stdin）；
1：标准输出（stdout）；
2：标准错误输出（stderr）；
对于3~9，则分给了正在打开的额外文件。
>：输出重定向到文件，并且覆盖。
>>：以追加的方式输入到文件
<：输入重定向到一个程序
2 >& 1 ：标准错误输出重定向到标准输出
重定向与管道符的区别：
1、管道符左右两边都是命令，且左边命令应该有标准输出，右边命令需要可以接收左边命令的标准输出。
2、重定向左边是命令，右边只能是文件或者设备。
2、多命令顺序执行
; ：分号。命令1;命令2; 命令之间无联系
&&：逻辑与。命令1&&命令2
|| ：逻辑或。命令1 || 命令2
多命令顺序执行与管道符的区别：
1、管道符两边命令是有联系的；
2、多命令执行两边的命令是无联系的；
[root@shiyong api]# grep 'cartDataGet' api_base.txt;ll
Buy.php: function cartDataGet()
总计 140
-rw-r--r-- 1 root root 31995 01-19 13:31 api_base.txt
-rw-r--r-- 1 root root 70781 01-19 13:31 apidoc.txt
-rw-r--r-- 1 root root 2461 01-19 13:31 api_ins.txt
-rw-r--r-- 1 root root 22 01-19 13:31 api_polymerize.txt
-rw-r--r-- 1 root root 778 01-19 13:31 api_trades.txt
-rw-r--r-- 1 root root 366 01-19 15:03 api_users.txt
-rw-r--r-- 1 root root 1096 01-19 13:31 api_weixin.txt
-rw-r--r-- 1 root root 169 01-19 14:33 test1.txt
-rw-r--r-- 1 root root 169 01-19 14:50 test2.txt
-rw-r--r-- 1 root root 169 01-19 14:33 test.txt
[root@shiyong api]# cp test.txt test1.txt && echo 'success'
success

3、tee命令
tee指令会从标准输入设备读取数据，将其内容输出到标准输出设备，同时保存成文件。
就是既会输出到屏幕，也会输出到指定的文件。
4、xargs命令
（1）将标准输入作为命令的参数。
（2）通过管道传递给xargs的输入将会包含换行和空白，不过通过xargs的处理，换行和空白将被空格取代。
（3）一般与find一起使用。
find命令把匹配到的文件传递给xargs命令，而xargs命令每次只获取一部分文件而不是全部，不像-exec选项那样。这样它可以先处理最先获取的一部分文件，然后是下一批，并如此继续下去。
find . -name "api_base.txt"|xargs grep 'coupons'|less

网页返回事件监听

一、为什么要监听返回事件
个人中心改版后，用户进入个人中心，从个人中心进入我的资料，在我的资料里面可以修改昵称，头像，邮寄地址等信息。在修改完信息之后，会跳转到我的资料页面，代码中是直接指定了我的资料页面地址。于是，在修改完信息后的我的资料页面点返回按钮，会返回到修改信息的页面，而不会返回到个人中心。如下图历史记录。

二、监听返回事件方法
1、监听返回按钮的方法：
window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);
2、如果这样写，还是会返回到上一页，所以还需要使用pushstate增加一个本页的url。
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
3、完整的写法：
pushHistory();
window.addEventListener("popstate", function(e) {
window.location.href="./wx_grzx.html";
}, false);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}

在实践中，这个方法是会有bug的。如果修改昵称页面不点击保存按钮，直接返回的话会返回到我的资料后立即跳转到个人中心。
于是呢，就出现了使用定时器来解决的方法。
    pushHistory();
    var bool=false;
    setTimeout(function(){
        bool=true;
    },1500);//1.5秒后将bool设置为true
    window.addEventListener("popstate", function(e) {
        if(bool) {
            window.location.href="./wx_grzx.html";
        } else {
            bool = true;//如果在1.5秒内触发了一次，则直接将bool设置为true
        }
        pushHistory();

    }, false);

    function pushHistory() {
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }

三、拓展知识
1、popstate用法：
popstate, 是HTML5新标准, 产生的目的就是做客户端前进后退。
每当处于激活状态的历史记录条目发生变化时，popstate事件就会被触发。如果当激活状态的历史记录条目是由history.pushState()方法创建的或者由history.replaceState()方法修改过的，则popstate事件的state属性包含了这条历史记录条目的state对象的一个拷贝。
需要注意的是调用pushState或者replaceState并不会触发popstate事件，只有点击浏览其回退按钮才回触发。

2、pushState和replaceState的异同。
    相同：用法相同
    以pushState来做说明：
    格式：pushState(state, title, url)
    参数说明：
    state：是一个javaScript对象或者json字符串，它关系到由pushState()方法创建出来的新的history实体。用来存储插入到历史记录条目的相关信息。
    title：一个暂时被某些浏览器忽略的参数，不过它在将来可能会被用上。现在的话可以传一个空字符串，也可以传一个简短的标题。
    url：用来传递新的history实体的url。即显示在地址栏的url。
    不同：pushState用于向history添加当前页面的记录，而replaceState是修改当前页面在history中的记录。
3、参考文档
    http://blog.csdn.net/tianyitianyi1/article/details/7426606

四、现有程序中如何使用
现在程序中使用的是，修改信息后，不指定跳转路径，而是使用window.history.go(-1);，这样在修改了信息之后返回到我的资料，我的资料再返就是到个人中心了。

shell脚本学习

一、一些基础的东西
shell脚本分为很多种，我们使用的比较多的是Bourne Shell（/usr/bin/sh或/bin/sh）和Bourne Again Shell（/bin/bash）。在一般情况下，并不区分Bourne Shelll和Bourne Again Shell。所以使用/bin/sh和/bin/bash都可以。
1、编写shell脚本有一个固定的格式，如下：
#！/bin/sh
符号#!用来告诉系统，后面的参数是用来执行该文件的程序。
2、执行shell脚本
比较常用的两种方法：
（1）使用bash 和 sh 执行
（2）在当前目录下，改变文件属性改为可执行，然后直接运行该文件。
chmod +x filename.sh
./filename.sh
3、注释
以#开头的句子表示注释。
4、变量
（1）在shell编程中，所有的变量都由字符串组成，并且不需要对变量进行声明。
（2）变量的命名规范同其他语言基本一样。
（3）定义变量。例如：your_name="chenjia"。
注意：等号与变量之间不能有空格。
（4）使用变量。只需要在变量名前家美元符号即可，例如：
echo $your_name 或者 echo ${your_name}。
（5）只读变量。顾名思义就是给使变量只能显示出来，不能赋值。在定义变量之后使用 readonly命令就可以将变量定义为只读变量。例如：
your_name="chenjia"
readonly your_name
（6）删除变量。使用unset命令。ps：unset命令不能删除只读变量
unset your_name
5、shell字符串
（1）单引号和双引号字符串，用法同php类似。
（2）拼接字符串
your_name="qinjx"
greeting="hello, "$your_name" !"
greeting_1="hello, ${your_name} !"
echo $greeting $greeting_1
（3）获取字符串长度
echo ${#your_name}
（4）提取子字符串
echo ${your_name:1:4}
二、shell数组
bash shell 只支持一维数组，初始化时不需要定义数组大小（同php类似）。
1、格式
array_name=(value1 value2 …… valuen)
数组用括号括起来表示，每个元素之间用“空格”分割开。
2、数组赋值
有两种方式：
第一种：array_name=("A" "B" "C" "D")
第二种：array_name[0]=A
array_name[1]=B
array_name[2]=C
array_name[3]=D
3、读取数组
echo ${array_name[index]}
4、获取数组中所有元素
echo ${array_name[]} 或者 echo ${array_name[@]}
5、获取数组长度
echo ${#array_name[]} 或者 echo ${#array_name[@]}
三、运算符
1、算数运算符

运算符说明举例
+ 加法 expr $a + $b 结果为 30。
- 减法 expr $a - $b 结果为 -10。
* 乘法 expr $a \* $b 结果为 200。
/ 除法 expr $b / $a 结果为 2。
% 取余 expr $b % $a 结果为 0。
= 赋值 a=$b 将把变量 b 的值赋给 a。
== 相等。用于比较两个数字，相同则返回 true。 [ $a == $b ] 返回 false。
!= 不相等。用于比较两个数字，不相同则返回 true。 [ $a != $b ] 返回 true。
2、关系运算符

运算符说明举例
-eq 检测两个数是否相等，相等返回 true。 [ $a -eq $b ] 返回 false。
-ne 检测两个数是否相等，不相等返回 true。 [ $a -ne $b ] 返回 true。
-gt 检测左边的数是否大于右边的，如果是，则返回 true。 [ $a -gt $b ] 返回 false。
-lt 检测左边的数是否小于右边的，如果是，则返回 true。 [ $a -lt $b ] 返回 true。
-ge 检测左边的数是否大于等于右边的，如果是，则返回 true。 [ $a -ge $b ] 返回 false。
-le 检测左边的数是否小于等于右边的，如果是，则返回 true。 [ $a -le $b ] 返回 true。
3、布尔运算符

运算符说明举例
! 非运算，表达式为 true 则返回 false，否则返回 true。 [ ! false ] 返回 true。
-o 或运算，有一个表达式为 true 则返回 true。 [ $a -lt 20 -o $b -gt 100 ] 返回 true。
-a 与运算，两个表达式都为 true 才返回 true。 [ $a -lt 20 -a $b -gt 100 ] 返回 false。
4、逻辑运算符

运算符说明举例
&& 逻辑的 AND [[ $a -lt 100 && $b -gt 100 ]] 返回 false
|| 逻辑的 OR [[ $a -lt 100 || $b -gt 100 ]] 返回 true
5、字符串运算符

运算符说明举例
= 检测两个字符串是否相等，相等返回 true。 [ $a = $b ] 返回 false。
!= 检测两个字符串是否相等，不相等返回 true。 [ $a != $b ] 返回 true。
-z 检测字符串长度是否为0，为0返回 true。 [ -z $a ] 返回 false。
-n 检测字符串长度是否为0，不为0返回 true。 [ -n $a ] 返回 true。
str 检测字符串是否为空，不为空返回 true。 [ $a ] 返回 true。

6、文件测试运算符

操作符说明举例
-b file 检测文件是否是块设备文件，如果是，则返回 true。 [ -b $file ] 返回 false。
-c file 检测文件是否是字符设备文件，如果是，则返回 true。 [ -c $file ] 返回 false。
-d file 检测文件是否是目录，如果是，则返回 true。 [ -d $file ] 返回 false。
-f file 检测文件是否是普通文件（既不是目录，也不是设备文件），如果是，则返回 true。 [ -f $file ] 返回 true。
-g file 检测文件是否设置了 SGID 位，如果是，则返回 true。 [ -g $file ] 返回 false。
-k file 检测文件是否设置了粘着位(Sticky Bit)，如果是，则返回 true。 [ -k $file ] 返回 false。
-p file 检测文件是否是有名管道，如果是，则返回 true。 [ -p $file ] 返回 false。
-u file 检测文件是否设置了 SUID 位，如果是，则返回 true。 [ -u $file ] 返回 false。
-r file 检测文件是否可读，如果是，则返回 true。 [ -r $file ] 返回 true。
-w file 检测文件是否可写，如果是，则返回 true。 [ -w $file ] 返回 true。
-x file 检测文件是否可执行，如果是，则返回 true。 [ -x $file ] 返回 true。
-s file 检测文件是否为空（文件大小是否大于0），不为空返回 true。 [ -s $file ] 返回 true。
-e file 检测文件（包括目录）是否存在，如果是，则返回 true。 [ -e $file ] 返回 true。
总结：（1）数字的加减乘除运算需使用expr或者let，并用反引号括起来。例如：expr $a + $b
（2）等于，不等于。有两种形式：==、!=和-eq、-ne。其中-eq 和-ne是关系运算符，所以不支持字符串，除非字符串的值是数字。
（3）切记，如果要使用<和>，则必须用[[]]括起来，否则无法使用。在linux中，<>表示输入输出重定向。
（4）与，或运算符。分为两种：-a，-o和&&，||。需要注意的是使用上两者有所不同，-a和-o可以使用[]括起来，&&和||必须使用[[]]括起来。
（5）除了定义赋值操作，其他情况运算符与变量之间都需要加空格。
四、流程控制
1、if ……else……
（1）格式
if condition
then
command1
command2
...
commandN
else
command
fi

如果想要将then 与if 也在同一行也是可以的。可以写成这样：
if condition;then
command1
command2
...
commandN
else
command
fi
2、if else-if else
（1）格式
if condition1
then
command1
elif condition2
then
command2
else
commandN
fi
（2）例子
a=10
b=20
if [ $a == $b ]
then
echo "a 等于 b"
elif [ $a -gt $b ]
then
echo "a 大于 b"
elif [ $a -lt $b ]
then
echo "a 小于 b"
else
echo "没有符合的条件"
fi
结果：a 小于 b
3、for 循环
（1）格式
for var in item1 item2 ... itemN
do
command1
command2
...
commandN
done
（2）例子
文件遍历
for i in cat test.txt
do
echo "value: ${i}"
done

数组遍历
arr=('a' 'b' 'c' 'd')
for i in ${arr[*]}
do
echo "value: ${i}"
done
4、while 循环
（1）格式
while condition
do
command
done
（2）例子
int=1
while(( $int<=5 ))
do
echo $int
let "int++"
done

循环遍历文件
while read line
do
echo ${line}
done < test.txt
5、until 循环（至少执行一次）
（1）格式
until condition
do
command
done
6、case
（1）格式
case 值 in
模式1)
command1
command2
...
commandN
;;
模式2）
command1
command2
...
commandN
;;
esac
（2）例子
echo '输入 1 到 4 之间的数字:'
echo '你输入的数字为:'
read aNum
case $aNum in
1) echo '你选择了 1'
;;
2) echo '你选择了 2'
;;
3) echo '你选择了 3'
;;
4) echo '你选择了 4'
;;
*) echo '你没有输入 1 到 4 之间的数字'
;;
esac
7、break 和continue
用两个例子来说明一下break和continue的用法
例子一：
while :
do
echo -n "输入 1 到 5 之间的数字:"
read aNum
case $aNum in
1|2|3|4|5) echo "你输入的数字为 $aNum!"
;;
*) echo "你输入的数字不是 1 到 5 之间的! 游戏结束"
break
;;
esac
done
例子二：
while :
do
echo -n "输入 1 到 5 之间的数字: "
read aNum
case $aNum in
1|2|3|4|5) echo "你输入的数字为 $aNum!"
beak
;;
*) echo "你输入的数字不是 1 到 5 之间的!"
continue
echo "游戏结束"
;;
esac
done
五、函数
linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。
（1）格式
[ function ] funname ()
{

内容

[return int;]

}
1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。
2、参数返回，可以显示加：return 返回，如果不加，将以最后一条命令运行结果，作为返回值。 return后跟数值n(0-255
（2）例子
例子一：
demoFun(){
echo "这是我的第一个 shell 函数!"
return '1'; #返回值只能是数值或者是字符串的值是数字
}
echo "-----函数开始执行-----"
demoFun
echo "${?}" #函数返回值在调用该函数后通过 $? 来获得
echo "-----函数执行完毕-----"
结果：
-----函数开始执行-----
这是我的第一个 shell 函数!
1
-----函数执行完毕-----

例子二：
funWithParam(){
echo "第一个参数为 $1 !"
echo "第二个参数为 $2 !"
echo "第十个参数为 $10 !"
echo "第十个参数为 ${10} !"
echo "第十一个参数为 ${11} !"
echo "参数总数有 $# 个!"
echo "作为一个字符串输出所有参数 $* !"
}
funWithParam 1 'b' 3 4 5 6 7 8 9 34 73
结果：
第一个参数为 1 !
第二个参数为 b !
第十个参数为 10 !
第十个参数为 34 !
第十一个参数为 73 !
参数总数有 11 个!
作为一个字符串输出所有参数 1 b 3 4 5 6 7 8 9 34 73 !

最后，分享一张特殊参数处理参数的表

参数处理说明
$# 传递到脚本的参数个数
$* 以一个单字符串显示所有向脚本传递的参数
$$ 脚本运行的当前进程ID号
$! 后台运行的最后一个进程的ID号
$@ 与$*相同，但是使用时加引号，并在引号中返回每个参数。
$- 显示Shell使用的当前选项，与set命令功能相同。
$? 显示最后命令的退出状态。0表示没有错误，其他任何值表明有错误。
六、总结
1、空格那些事 http://www.jb51.net/article/60328.htm
（1）等号赋值两边不能有空格例如：your_name="chenjia"
（2）取变量值的符号'$'和后边的变量或括号不能有空格例如：${your_name}
（3）命令与参数或者对象之间必须有空格
（4）if 语句后面的 []，[左右两边都必须有空格，]（尾巴）左边必须有空格。[ 等价于 test命令，所以两边都需要加空格。
（5）管道符两边的空格可有可无例如 find . -name "*.php"|xargs grep 'some'
2、(())、[[]]、[]
（1）(())是算数及赋值运算的扩展
[[]]是关键字
[]是命令
（2）使用 (( )) 时，不需要空格分隔各值和运算符，使用 [[ ]] 时需要用空格分隔各值和运算符。
（3）数字的运算可使用(( )) ，其中运算时不需要变量$符号
（4）[[ ... ]]进行算术扩展，而[ ... ]不做
（5）用[[ ... ]]测试结构比用[ ... ]更能防止脚本里的许多逻辑错误。比如说，&&,||,<和>操作符能在一个[[]]测试里通过，但在[]结构会发生错误。
（6）[ ... ]为shell命令，所以在其中的表达式应是它的命令行参数，所以串比较操作符">" 与"<"必须转义，否则就变成重定向操作。
（7）数字的比较最好使用 (( ))，虽说可以使用 [[ ]]，但若在其内使用运算符 >、>=、<、<=、==、!= 时，其结果经常是错误的，不过若在 [[ ]] 中使用 [ ] 中的运算符“-eq、-ne、-le、-lt、-gt、-ge”等，还尚未发现有错。
例：[[ "a" != "b" && 10 > 2 ]] 判断结果就不正常。

UEditor 独立图片上传功能

一、下载使用ueditor

1、从官网上下载UEditor富文本编辑器

2、学会部署使用ueditor。

二、实现方法

1、在html中放置UEditor编辑器，为了不使独立上传图片功能影响到正常的编辑器，这里要多设置一个UEditor编辑器并且需要隐藏。如下代码，myEditor是正常使用的编辑器，upload_ue为隐藏的编辑器。

<script id="myEditor" type="text/plain"></script>
<script id="upload_ue" type="text/plain" style="display:none"></script>

2、实例化编辑器，并侦听图片上传，实现图片预览

<script type="text/javascript">
    var _editor;
    $(function() {
        //实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
        _editor = UE.getEditor('upload_ue');
        _editor.ready(function () {
            //侦听图片上传
            _editor.addListener('beforeInsertImage', function (t, arg) {
                //单图预览
                $("#pic_lsit").attr("src", arg[0].src); 
                //多图预览
                for (var i = 0; i < arg.length; i++) {
                    $("#pic_list").append('<div id="photos'+i+'" style="float:left;"><input type="hidden" name="photos[]" value="'+arg[i].src+'" /><img src="'+arg[i].src+'" width="150" height="150" /><a onclick="removePhoto('+i+')">删除</a></div>');
                }
            });
        });
    });
</script>

ps：实例化编辑器之后，一定要确保编辑器上传图片功能能够实现。

3、添加一个按钮，并绑定onclick事件，用于触发编辑器中的上传图片功能。

<button onclick="upImage()">上传图片</button>

<script>
function upImage() {
    var myImage = _editor.getDialog("insertimage");
    myImage.open();
}
</script>

三、参数配置

1、在/ueditor/php/config.json中修改相关配置

/* 上传图片配置项 */
"imageActionName": "uploadimage", /* 执行上传图片的action名称 */
"imageFieldName": "upfile", /* 提交的图片表单名称 */
"imageMaxSize": 2048000, /* 上传大小限制，单位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
"imageCompressEnable": true, /* 是否压缩图片,默认是true */
"imageCompressBorder": 1600, /* 图片压缩最长边限制 */
"imageInsertAlign": "none", /* 插入的图片浮动方式 */
"imageUrlPrefix": "", /* 图片访问路径前缀 */
"imagePathFormat": "/test2/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

下载测试代码ueditor 独立图片上传