Open Hibop opened 5 years ago
FRONT VIEW:
d^b _,,ddP"""Ybb,,_ d^b
d ,dP"' `"Yb, b
b,d" "b,d
d" ,d""YgP""b, "b
d' 8 o g o 8 `b
8 d,gPPPPRg,b 8
8 dP' 'Yb 8
8 8) 8 8 (8 8
Y, Yb dP ,P
Ya "8ggggg8" aP
"Ya b,,,d aP"
8"Yb,_ _,dP"8
8 8YbbgggddP8 8
d b d b
"""""" """"""
SIDE VIEW:
,
,db,_,,ddP"""Ybb,,_
d ,dP"' `"Yb,
bd" "b,
d"b "b
d'd b `b
,d88888, ,' 8
d 8 " 8 ,b,
d 8 8b b b
d Y, ,P b b b
"d88888Ya aP "bbb
d"Ya aP" 'cc,
8"Yb,_ _,dP"8
8 8YbbgggddP8 8
d b d b
"""""" """"""
_
,.-" "-.,
/ === \
/ ======= \
__| (o) (0) |__
/ _| .---. |_ \
| /.----/ O O \----.\ |
\/ | | \/
| |
| |
| |
_\ -.,_____,.- /_
,.-" "-.,_________,.-" "-.,
/ | | \
| l. .l |
| | | |
l. | | .l
| l. .l | \,
l. | | .l \,
| | | | \,
l. | | .l |
| | | | |
| |---| | |
| | | | |
/"-.,__,.-"\ /"-.,__,.-"\"-.,_,.-"\
| \ / | |
| | | |
\__|__|__|__/ \__|__|__|__/ \_|__|__/
! !
! ! ! !
! . ! ! . !
^^^^^^^^^ ^
^ ^
^ (0) (0) ^
^ "" ^
^ *************** ^
^ * * ^
^ * /\ /\ /\ * ^
^ * * ^
^ * /\ /\ /\ /\ * ^
^ * * ^
^ * * ^
^ * * ^
^ * * ^
^* * ^
^ * * ^
^ * * ^
^ * ) ( * ^
^^^^^^^^ ^^^^^^^^^
.
1
1
1
M
M
M
M
\M/
. ' M ` .
\##-#####-##/
\# ##### #/
###############
###############
\ ! ! ! ! ! /
)! ! ! ! !(
+---------+
+! ! ! ! !+
+----*----+
+`. .':`. .'+
+ .^. : .^. +
+:...:*:...:+
+`. .':`. .'+
+ .^. : .^. +
+:...:*:...:+
+`. .':`. .'+
+. ^. : .^ .+
+:....:*:....:+
+` . ':` . '+
+ .^. : .^. +
+:....:*:....:+
+` .. ':` .. '+
+. '` .:. '` .+
+:....:*:....:+
+ `. .':`. .' +
+ X : X +
+.' `.:.' `.+
+:......*......:+
+`. .':`. .'+
+ X : X +
+ .' `. : .' `. +
+.......*.......+
+` . . ':` . . '+
+ X : X +
+ ' ` : ' ` +
+../########....+
+`/#########\ .'+
+ ############ +
+ '############` +
+:.......*.......:+
+ ` . ' : ` . ' +
+ X : X +
+ .' `.:.' `. +
+:.......*.......:+
+` ':` '+
+ ` ' : ` ' +
+ X : : X +
+ ' ` : : ' ` +
+:.......*.*.......:+
+` ': :` '+
+ ` ' : : ` ' +
+ X : X : X +
+ ' ` :' `: ' ` +
+:.......*...*.......:+
+` ':` ':` '+
+ ` ' : X : ` ' +
+ X : : X +
+ ' ` :/ \: ' ` +
+:.......*.....*.......:+
+` ':` ':` '+
+ ` ' : `.' : ` ' +
+ X : ' ` : X +
+ ' ` :' `: ' ` +
+:.......*.......*.......:+
+ ` ':` ':` ' +
+ ` . ' : `.' : ` . ' +
+ ' ` : ' ` : ' ` +
+. ' ` : ' ` : ' ` .+
+..........*.........*..........+
+ ########################### +
+ ########################### +
+ ########################### +
#########################################
###########################################
\ 1 1 1 1 1 1 1 1 1 /
) 1 1 1 1 1 1 1 1 1 (
+-----:-----+-------------+-----:-----+
+ : + + : +
*------*-----*-------------*-----*------*
+XXXXXXXXXXX+XXXXXXXXXXXXXXX+XXXXXXXXXXX+
*-----*-----*---------------*-----*-----*
+ `. : . '+ +` . : .' +
+ . : ' + + ` : . +
+ . *. + + .* . +
+ . ' : `. + + .' : ` . +
*:......*....:* *:....*......:*
+ `. : . '+ +` . : .' +
+ `.:. ' + + ` .:.' +
+ . '* `. + + .' *` . +
+ . ' : `.+ +.' : ` . +
*:.....*.......* *.......*.....:*
+ ` .. : .. ' + + ` .. : .. ' +
+ . *' + + `* . +
+ .. ' : ` . + + . ' : ` .. +
*.:....*.......:* *:.......*....:.*
+ ` ..: . - ' + + ` - . :.. ' +
+ .. * .. + + .. * .. +
-------------------------------------------------------------------
1 +: : +: : : :+ : :+ 1
1+ : : +: : : :+ : : +1
###################################################################
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
+---------------------------------------------------------------+
+! . ! . ! . ! . !+. ! . ! . ! . ! . ! . ! . ! .+! . ! . ! . ! . !+
+:!: :!: :!: :!: :!+ :!: :!: :!: :!: :!: :!: :!: +!: :!: :!: :!: :!:+
+.!.:.!.:.!.:.!.:.!+:.!.:.!.:.!.:.!.:.!.:.!.:.!.:+!.:.!.:.!.:.!.:.!.+
+XXXXXXXXXXXXXXXXXX+\ \ ..-#######-.. / /+XXXXXXXXXXXXXXXXXX+
*-------------------* \ .-' \ 1 1 1 / `-. / *-------------------*
+ ` . : .. ' + \.-' \ .-------. / `-./ + ` .. : . ' +
+.......:.*:........+ .-' \ .-'' ``-. / `-. +........:*.:.......+
+ . ' : ` . +\: \ -' `- / :/+ . ' : ` . +
+..:.......:.....:..+/ \ .-' `-. / \+..:.....:.......:..+
+ ` . : . ' + \.' `./ + ` . : . ' +
+.........:.*..:.....+ / \ +.....:..*.:.........+
+ . ' : ` . + / \ + . ' : ` . +
+...:......:........:+ / \ +:........:..........+
+ ` . : . ' +/ \+ ` . : . ' +
+...........*.........+ +.........*...........+
+ . ' : ` . + + . ' : ` . +
+...:.......:.........:+ +:.........:.......:...+
+ ` . : . ' + + ` . : . ' +
+..........:.*.:........+ +........:.*.:..........+
+ . ' : ` . + + . ' : ` . +
+...:.........:.........:+ +:.........:.........:...+
+ ` . : . ' + + ` . : . ' +
+...........:.*..:........+ +........:..*.:...........+
+ . ' : ` . + + . ' : ` . +
+...:.........:..........:.+ +.:..........:.........:...+
+ ` . : . ' + + ` . : . ' +
+ ` * - ' + + ` - * ' +
-----------------------------------------------------------------------------------------------------------------
1 1
/ \ / \
/ \ / \
1==*1 1===1
.------------------------------. .------------------------------.
' " "!""""^""""""""""""^""""!" ".` '." "!""""^""""""""""""^""""!" " `
`1 .! U U ! 1 1 ! U U !. 1
`===============================-. .-==============================='
:... !5555555555555555555555! ^ = = ^ !5555555555555555555555! ...:
''. `-------O---------O-------- ! ! --------O---------O-------' .``
: ^ $ ^ . ^ ^ . ^ ^ +== ==+ ^ ^ . ^ ^ . ^ $ ^ :
/.:"/ \ ^ .' `. ^ ^ .' `. ^ / \"$ $"/ \ ^ .' `. ^ ^ .' `. ^ / \":.\
:/ 1^1 ^ . X . ^ . X . ^ 1^1"""$ $"""1^1 ^ . X . ^ . X . ^ 1^1 \:
<$ : : . XXX . . XXX . : :`^"P 9"^': : . XXX . . XXX . : : $>
! : : . XXXXX . . XXXXX . : : . > < . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . ! ! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . ! ! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . ! ! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . ! 1 ! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !$ -+- $! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !1 1 1! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !1 1 1! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !+> O <+! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !: 1 :! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !: 1 :! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !: ' ` :! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !: 1 1 :! . : : . XXXXX . . XXXXX . : : !
! : : . XXXXX . . XXXXX . : : . !: 1 1 :! . : : . XXXXX . . XXXXX . : : !
\` : : . XXXXX . . XXXXX .- : : . !: 1 1 :! . : : -. xxxxx . . XXXXX . : : '/
.\\ : : . XXXXX . . XXXXX .\\: : > !: 1 1 :! . : ://. XXXXX . . XXXXX . : : //.
1\====== . XXXXX . . XXXXX . ====== !: 1 1 :! ====== . XXXXX . . XXXXX . ======/1
`1---`` V 1--------------------`` 1------------------------------1 ''--------------------1 V ''---1'
`1 V /======\ V V V V V V V V V /======\ V V V V V V V V V V V V V /======\ V V V V V V V V V /======\ V 1'
<1== \ /===================\ /============================\ /===================\ / ==1>
1 1 /\ 1\/ \/ \/ \/ \/ \/ \/-1 /\ 1 1\/ \/ \/ \/ \/ \/ \/ \/-1 1 /\ 1\/ \/ \/ \/ \/ \/ \/-1 /\ 1 1
1 1/ \1/\ /\ /\ /\ /\ /\ /\\1/ \1-\1/\ /\ /\ /\ /\ /\ /\ /\\1/-1/ \1/\ /\ /\ /\ /\ /\ /\\1/ \1 1
1 W-++-W V V V V V V W-++-W-\W V V V VA V V V W/-W-++-W V V V V V V W-++-W 1
<1 I 11 I 1 1 1- 1 1 1 I 11 I I 1 1 1 A XA1 1 1 I I 11 I 1 1 1 1 -1 1 I 11 I 1>
1` I 11 I- 1 1 -1 1 1 -1 I 11 I- I 1 1 1AX XX 1 1 I- I 11 I- 1 1- 1 1 1 1- I 11 I '1
1 I 11 I 1 1 1 -1 -1 1 - I 11 I I 1 1 XX XX A 1 1 I -I 11 I 1- 1 1 1 1 1 I 11 I 1
1 I 11 I 1- 1 1 1 1- 1 I 11 I I 1 1 A XX XX XA1 1 I I 11 I 1 1 1 -1 1 -1 I 11 I 1
1 I 11 I 1 1- 1 1. 1. 1 I 11 I- I 1 1AX XX XX XX 1 I- I 11 I -1 .1 .1 1 1 1 I 11 I 1
1 I 11 I 1 1 1 1. 1. 1- I 11 I I 1 XX XX XX XX A 1 I I 11 I 1 .1 .1 1 1 1 - I 11 I 1
1 I 11 I -1 1 1- 1. 1. 1 I 11 I I 1 A XX XX XX XX XA1 I I 11 I 1 .1 .1 1- 1- 1 I 11 I 1
' / 11 \ 1 1 1 1 1 1 / 11 \ I 1AX XX XX XX XX XX1. I / 11 \ 1 1 1 1 1 1 / 11 \ `
<====\ ^^^^ /===================\ ^^^^ /============================\ ^^^^ /===================\ ^^^^ /====>
`^^^ 1 1 ^^^^^^^^^^^^^^^^^^^ 1 1 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 1 1 ^^^^^^^^^^^^^^^^^^^ 1 1 ^^^'
1 1 1 1 1/`*'\ ..--------.. /`*'\1 1 1 1 1
1 1 1/`*'\ /`*'\1 1`-^-' .-' ........ `-. `-^-'1 1/`*'\ /`*'\1 1 - 1
1 - 1 1`-^-' .---. `-^-'1 1 \-/.' .'' ``. `.\-/ 1 1`-^-' .---. `-^-'1 1 1
1 1 1 \-/ .-' `-. \-/ 1 1 .' .'.--PXXXXXX9--.`. `. 1 1 \-/ .-' `-. \-/ 1 1 1
/ 1----1 .' --- `. 1----1 . .'./ \ 1 1 / 1.`. . 1----1 .' --- `. 1----1 - \
1 - 1 1 / .: 1 :. \ 1 1' . / \ \ 1 1 / / \ . `1 1 / .: 1 :. \ 1 1 1
1 - 1 1 / 1 :O: 1 \ 1 1 . A`. \ ---`'--- / .'A . 1 1 / 1 :O: 1 \ 1 1 1
1 1 1/ `: 1 :' \1 1 . A `../. \ / .\..' A . 1 1/ `: 1 :' \1 1 - 1
1 1 () : .-'`-. --- .-'`-. : () 1 ./---...1 \ \/ / 1...---\. 1 () : .-'`-. --- .-'`-. 1 () 1 1
$ 1 - 1 /\ 1 / .'`. \ / .'`. \ 1 /\ 1 .X /`--..--..--'\ X. 1 /\ 1 / .'`. \ / .'`. \ 1 /\ 1 1 $
1-1 1/ \1/ .' `. \ / .' `. \1/ \1--X----< 1 1 >----X--1/ \1/ .' `. \ / .' `. \1/ \1 - 1-1
1 1 - /----\1 1 1-+-+-1 1 1/----\11X ..\.--'`--'`--./.. X11/----\1 1 1-+-+-1 1 1/----\ 1 1
--------1 11 1 1 1P1 1 1 11 111\--- 1 / /\ \ 1 ---/111 11 1 1 191 1 1 11 1--------
1 1 11 1 1 1 1 1 1 11 111 V .-' \' / \ `/ `-. V 111 11 1 1 1 1 1 1 11 1 1
1 1 11 1 1 1!1 1 1 11 1 V' .- ---..--- -. `V 1 11 1 1 1!1 1 1 11 1 1
1 - 1 11 1 1 1A1 1 1 11 1 \' / / \ \ `/ 1 11 1 1 1A1 1 1 11 1 - 1
1 ------------------------------------------------------------------------------------------------ 1
1 1! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !1 1
1 - 1! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! !1 - 1
1 / \ 1
1 ---------------------------------------------------------------------------------------------------- 1
1 1/'`\1/'`\1/'`\1X1/'`\1/'`\1/'`\1/'`\1/'`\1/'`\11/'`\1/'`\1/'`\1/'`\1/'`\1/'`\1X1/'`\1/'`\1/'`\1 1
1 -X()X-X()X1X()X1X1X()X1X()X-X()X-X()X1X()X1X()X11X()X1X()X1X()X-X()X-X()X1X()X1X1X()X1X()X-X()X- 1
1 - 1X'`X1X'`X1X'`X1X1X'`X1X'`X1X'`X1X'`X1X'`X1X'`X11X'`X1X'`X1X'`X1X'`X1X'`X1X'`X1X1X'`X1X'`X1X'`X1 - 1
1 1X X1X X1X X1X1X X1X X1X X1X X1X X1X X11X X1X X1X X1X X1X X1X X1X1X X1X X1X X1 1
1 AX XAX X1X X1X1X X1X XAX XAX X1X X1X X11X X1X X1X XAX XAX X1X X1X1X X1X XAX XA 1
1 ------------------------------------------------------------------------------------------------ - 1
1 - 1 1 .---. 1 1 .----. 1 1 .---. 1 1 1
1 1 1 .-.:::.-. 1 1 .-'.::::.`-. 1 1 .-.:::.-. 1 1 1
1 - 1 1 .''':::::```. 1 1 -''::::::::::``- 1 1 .''':::::```. 1 1 - 1
1 1 1 /'''':' `:````\ 1 1 .'''''''::::```````. 1 1 /'''':' `:````\ 1 1 1
1 1 1 /''''' `````\ 1 1 /''''''' ```````\ 1 1 /''''' `````\ 1 1 1
1 1 `' 1 :''''' `````: 1 `' 1 /'''''' ``````\ 1 `' 1 :''''' `````: 1 `' 1 1
1 - 1----1 1'''' ````1 1----1 /'''''' ``````\ 1----1 1'''' ````1 1----1 - 1
1 1'()`1::::: . . :::::1'()`1 /'''''' . . ``````\ 1'()`1::::: . . :::::1'()`1 1
1 1X'`X11::: :::11X'`X1:'''''' ``````:1X'`X11::: :::11X'`X1 1
1 - 1X X11::: :::11X X11:'''' ````:11X X11::: :::11X X1 - 1
1 1X X11::: . . . . :::11X X11::::: . .. . :::::11X X11::: . . . . :::11X X1 1
1 - 1+--+11::: : :::11+--+11::::: :::::11+--+11::: : :::11+--+1 1
1 1 1---- ##### ##### ----1 1------ ##### ##### ------1 1---- ##### ##### ----1 1 1
1 - 1 1:::: ##### ##### ::::1 1::::: ##### ##### :::::1 1:::: ##### ##### ::::1 1 - 1
1 1 1:::: ##### ##### ::::1 1::::: ##### ##### :::::1 1:::: ##### ##### ::::1 1 1
1 1 1:::: ##### ##### ::::1 1::::: ##### ##### :::::1 1:::: ##### ##### ::::1 1 1
1 1 1:::: ##### ##### ::::1 1::::: ##### ##### :::::1 1:::: ##### ##### ::::1 1 1
1 /\ 1---- ##### ##### ----1 1----- ##### ##### -----1 1---- ##### ##### ----1 /\ 1
1 - 11 1 1 ##### ##### 1 1 1 1 ##### ##### 1 1 1 1 ##### ##### 1 1 11 - 1
1 11 1 1 ##### ##### 1 1 1 1 ##### ##### 1 1 1 1 ##### ##### 1 1 11 1
1 11 1 1 ##### ##### 1 1 1 1 ##### ##### 1 1 1 1 ##### ##### 1 1 11 1
--------------------------------------------------------------------------------------------------------------------
..........,'RRRRRRRRRRRRRRRRRRRRRRRRR`,..........
1^?##-------##-------##-------##-------##-------##-------##-------##-------##-------##-------##-------##1
1 1
-------------------------------------------------------------------------------------------------------------
===========================================================================================================
1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1 ' ` 1!!1
1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1 ` ' 1!!1
1!!1 1!!1 1!!1 1!!1 1!!1 1!!1 1!!1 1!!1 1!!1 1!!1 1!!1 1!!1
:1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1:
:1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1:
+-------------------------------------------------------------------------------------------------------+
1 1
=================================================================================================================
\ U U U U U U U U U U U U U U /
---------------------------------------------------------------------------------------------------------------
1U U U U U U U U U U U U U U U U U U U U U U U U U U U U U U U U U U U1
1 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
1 . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . .. . . . . .. . 1
1 .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
---------------------------------------------------------------------------------------------------------
------------------------------------------------- - -------------------------------------------------
1 1 .^..... `: :' .....^. 1 1
1 1 : .-' ..---! - !---.. `-. : 1 1
1 +-------------------------+ 1 . : .-' ! ! `-. : . 1 +-------------------------+ 1
1 1 ----------------------- 1 1 . . .' .----`-'----. `. . . 1 1 ----------------------- 1 1
1 1 .. . . . . . . 1 1 .. .' .-' `-. `. .. 1 1 . . . . . . . .. 1 1
1 1 . . . . . . . . . 1 1 : .' `. : 1 1 . . .. . . . . . 1 1
1 1 . . .. . . . . 1 1 : ' ` : 1 1 . . . . . . . . 1 1
1 1 . . . . . . ... 1 1 : ' ` : 1 1 .. . . . . . . 1 1
1 1 . . . . . . . .. 1 1.' .' `. `.1 1 .. . . . . . 1 1
1 1 ======================= 1 : ' ` : 1 ======================= 1 1
1 +-------------------------+ ' : : ` +-------------------------+ 1
1 ! ! ! ! 1
1 1 1 1 1 1
========================================= =========================================
1 1 1 1 1 1
1-----------------------------------1 1-----------------------------------1
1 1 1 1 1 1
1 1 1 1 1 -. .' ` 1
1 ^ 1 1 1 1 ` . . -' : : 1
1 ' 1 1 1 1 : ```-.. 1
1 . . . ^ .```` 1 1 1 1 ---: O ```````. 1
1 . .. ````` 1 1 1 1 `` `` '`````' 1
1 . `` . ' . 1 1 1 1 `` : 1
1 . . . . 1 1 1 1 : ` ` > 1
1 `' . `. : 1 1 1 1 . ' ' :`. : 1
1 . ' .. ' 1 1 1 1 ---` 1
1 ' . ' ` .. 1 1 1 1 `. . `. , .. 1
1 ' `` - . 1 1 1 1 ` ` .. 1
1 ` ' ^ :' 1 1 1 1 ` .' .` ` 1
1 .. . ` . : 1 1 1 1 ` ' :. . 1
1 . ``. . `` O 1 1 1 1 ` -. . `. 1
1 ` :: ! : 1 1 1 1 . ' `. `` 1
1 : !! ! .' 1 1 1 1 .`. : : .' 1
1 ------------ 1 1 1 1 ------------ 1
1 / \ 1 1 1 1 / \ 1
1 ================ 1 1 1 1 ================ 1
===========1 1========== 1 1 ==========1 1===========
1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1
/---------/--------------\--------\---\ /---/--------/--------------\---------\
1 1 1 1 1 1 1 1 1 1
1 1 1 1 1 1 1 1 1 1
-----------------------------------------------------------------------------------------------------------
M
' `
.O.
.: :.
`.- -.'
. ! .
: ! :
/ \
=-.$.-=
1< >1
.1 > < 1.
.-' ' ` `-.
.-' \-----------/ `-.
.-' 11 # # # 11 `-.
\. ./ .-' 11 # # # 11 `-. \. ./
: \.O./ .-' ...---------------... `-. \.O./ :
`: : .-' .-'' ``-. `-. : :'
: : ') .-' .--' `--. `-. (` : :
<': :'> : . .-' .-' `-. `-. . : <`: :`>
..' ' . ` ` .. .-' . . `-. .. ' ' . ` `..
`- .. ` .'---+.-' .^ ^ ^ ^ ^ ^ ^ ^. `-.+---`. ' .. -'
========= 1 : `..' `. .' `. .' `. .' `. .' `. .' `..' : 1 =========
/ \-----------------------------------------------------------------------------/ \
1 1 1 1
'^--^--^--^--^--^--^--^1^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^--^1^--^--^--^--^--^--^--^`
===================================================================================================================
\ NN NN NN M M NN NN NN1 NN M NN NN NN NN M NN NN NN NN M NN NN NN NN M NN NN NN NN M NN 1NN NN NN M M NN NN NN /
=================================================================================================================
1 ^ 1 . . . . . . . . 1 ^ 1
1 /X\ 1 ` .-. ' : M : ` .-. ' : M : ` .-. ' : M : ` .-. ' : M : ` .-. ' 1 /X\ 1
1 .---------. 1 . `-' . ` ' . `-' . ` ' . `-' . ` ' . `-' . ` ' . `-' . 1 .---------. 1
1 .-'..-------..`-. 1 !:!:! !:!:! !:!:! !:!:! 1 .-'..-------..`-. 1
.-'.-' ^.! - !.^ `-.`-1=========/-----\=======/-----\=======/-----\=======/-----\=========1-'.-' ^.! - !.^ `-.`-.
/ -' .-' 1`-.-'1 `-. `-1 1 `W' 1 1 `W' 1 1 `W' 1 1 `W' 1 1-' .-' 1`-.-'1 `-. `- \
-------------------------------------------------------------------------------------------------------------------
1MMM1 CHOREGRAPHIE 1MM1 : : M`-'M1 * ACADEMIE NATIONALE DE MUSIQUE * 1M`-'M : : 1MM1 POESIE LYRIQUE 1M1
1---------------------1-------------------------------------------------------------------1---------------------1
1---------------------1-------------------------------------------------------------------1---------------------1
11 1 1 '1` 1 1 111 '1` 1 1 1 '1` 1 1 1 '1` 1 1 1 '1` 1 1 1 '1` 111 1 1 '1` 1 1 11
11 X 1 : - : 1 X 111 : - : 1 X 1 : _ : 1 X 1 : _ : 1 X 1 : _ : 1 X 1 : _ : 111 X 1 : _ : 1 X 11
11 X 1 1`#'1 1 X 111 1`#'1 1 X 1 1`#'1 1 X 1 1`#'1 1 X 1 1`#'1 1 X 1 1`#'1 111 X 1 1`#'1 1 X 11
11 - --------- - 111--------- - --------- - --------- - --------- - ---------111 - --------- - 11
11 U 1 XXXXX 1 U 1111 XXXXX 1 U 1 XXXXX 1 U 1 XXXXX 1 U 1 XXXXX 1 U 1 XXXXX 1111 U 1 XXXXX 1 U 11
11 X #-#####-# X 111#-#####-# X #-#####-# X #-#####-# X #-#####-# X #-#####-#111 X #-#####-# X 11
11 X # ##### # X 111# ##### # X # ##### # X # ##### # X # ##### # X # ##### #111 X # ##### # X 11
11 X # ##### # X 111# ##### # X # ##### # X # ##### # X # ##### # X # ##### #111 X # ##### # X 11
11 X # ##### # X 111# ##### # X # ##### # X # ##### # X # ##### # X # ##### #111 X # ##### # X 11
11 X # ##### # X 111# ##### # X # ##### # X # ##### # X # ##### # X # ##### #111 X # ##### # X 11
11 X # ##### # X 111# ##### # X # ##### # X # ##### # X # ##### # X # ##### #111 X # ##### # X 11
1 V 1N-----N1 V 1 1N-----N1 V 1N-----N1 V 1N-----N1 V 1N-----N1 V 1N-----N1 1 V 1N-----N1 V 1
1 1 1N N1 1 1 1N N1 1 1N N1 1 1N N1 1 1N N1 1 1N N1 1 1 1N N1 1 1
.-----------------------------------------------------------------------------------------------------------------.
1 W 1 W 1.-.1 W 1.-.1 W 1.-.1 W 1.-.1 W 1 W 1
1...... .---. .. ..1 .---. $1 1$ .---. $1 1$ .---. $1 1$ .---. $1 1$ .---. 1...... .---. ......1
1.` ' .'#####`. \'`/ 1 .'#####`. `-' .'#####`. `-' .'#####`. `-' .'#####`. `-' .'#####`. 1 . `.'.'#####`. ` '.1
1 .: ' ######### : ' 1 ######### ######### ######### ######### ######### 1..: . ######### ` :. 1
1 `/:. ######### .: . 1 ######### P ######### P ######### 9 ######### 9 ######### 1:` . .######### .:\' 1
1 :' . ######### . 1 ######### H ######### H ######### H ######### H ######### 1 `\' ######### . `: 1
1 1 /: ######### ` / 1 ######### M ######### M ######### M ######### M ######### 1 ^ U/ ######### :\ 1 1
1-+--+-#########-+--+-1-#########-+-+-#########-+-+-#########-+-+-#########-+-+-#########-1-+--+-#########-+--+-1
1 1 1 ######### 1 1 1 ######### 1 1 ######### 1 1 ######### 1 1 ######### 1 1 ######### 1 1 1 ######### 1 1 1
1 1 1 ######### 1 1 1 ######### 1 1 ######### 1 1 ######### 1 1 ######### 1 1 ######### 1 1 1 ######### 1 1 1
1---------------------1-------------------------------------------------------------------1---------------------1
___---___
___---___---___---___
___---___--- * ---___---___
___---___--- o/ 0_/ @ o ^ ---___---___
___---___--- @ i_e J-U /| -+D O|-| (o) / ---___---___
___---___--- __/| //\ /| |\ /\ |\| |_ __--oj ---___---___
__---___---_________________________________________________________---___---__
===============================================================================
|||| ||||
|---------------------------------------------------------------------------|
|___-----___-----___-----___-----___-----___-----___-----___-----___-----___|
/ _ \===/ _ \ / _ \===/ _ \ / _ \===/ _ \ / _ \===/ _ \ / _ \===/ _ \
( (.\ oOo /.) ) ( (.\ oOo /.) ) ( (.\ oOo /.) ) ( (.\ oOo /.) ) ( (.\ oOo /.) )
\__/=====\__/ \__/=====\__/ \__/=====\__/ \__/=====\__/ \__/=====\__/
||||||| ||||||| ||||||| ||||||| |||||||
||||||| ||||||| ||||||| ||||||| |||||||
||||||| ||||||| ||||||| ||||||| |||||||
||||||| ||||||| ||||||| ||||||| |||||||
||||||| ||||||| ||||||| ||||||| |||||||
||||||| ||||||| ||||||| ||||||| |||||||
||||||| ||||||| ||||||| ||||||| |||||||
||||||| ||||||| ||||||| ||||||| |||||||
(oOoOo) (oOoOo) (oOoOo) (oOoOo) (oOoOo)
J%%%%%L J%%%%%L J%%%%%L J%%%%%L J%%%%%L
ZZZZZZZZZ ZZZZZZZZZ ZZZZZZZZZ ZZZZZZZZZ ZZZZZZZZZ
===========================================================================
__|_________________________________________________________________________|__
_|___________________________________________________________________________|_
|_____________________________________________________________________________|
**_______________________________________________________________________________**
目录
DOM-FileUpload 对象
在网页上传文件,最核心元素就是这个HTML DOM的
FileUpload对象
——input[type="file"]
。在 HTML 文档中该标签每出现一次,一个 FileUpload 对象就会被创建。
把这个标签放在
<form>
标签内,设置form的action为服务器目标上传地址,并点击submit按钮
或通过JS调用form的submit()方法
就可以实现最简单的文件上传。这样就完成功能吗?没错。但是你要是敢提交这样的代码,估计脸要被打肿。这个面临N多问题:
input-file 换造型
input-file按钮文字及UI定制化比较蛋疼,这是浏览器内置的文字,可以思考下怎么hack
虽然说是「隐藏」,但只是让原生上传控件「不可见」而已,它还是妥妥地在表单中占据着空间位置。当点击所看到的「按钮」时,实际点击的是原生上传控件,这样一来就触发了浏览器默认行为,即打开选择文件对话框。
多文件支持
一个一个添加文件太麻烦?别急,打开一个开关就好了————
multiple
属性。只要这样我们就能在打开的文件选择对话框中选中多个文件了。然后你在代码里拿到的FileUpload对象的files属性就是一个选中的多文件的数组, 这个数组和
arguments
、nodelist
等类数组不同。FormData的append方法提供第三个可选参数用于指定文件名,这样就可以使用同一个表单项名,然后用文件名区分上传的多个文件。这样也方便前后台的循环操作。
file相关元素API
input[type="file"]
标签:<form></form>
标签:file
对象的属性:[发散一下]: MIME type
image/png || gif || jepg || svg+xml Multipart =>>>multipart/form-data multipart/byteranges 类型表示细分领域的文件类型的种类,经常对应不同的 MIME 类型。这是复合文件的一种表现方式 很多web服务器使用默认的 application/octet-stream 来发送未知类型。出于一些安全原因,对于这些资源浏览器不允许设置一些自定义默认操作
更优雅HTML5上传
现代
HTML5
网页通过什么来实现用户与服务器的无刷新交互?XMLHttpRequest
FormData
FileReader
Blob
drag
jsonp
XMLHttpRequest
这个你很熟悉的家伙但又感觉很陌生。如果你开发的产品支持的浏览器是现代浏览器,那么恭喜你,文件上传就是这么easy!特别强调强调现代浏览器是因为我们接下来讨论的XMLHttpRequest指的是XMLHttpRequest Level 2。
那什么是Level 1?为什么不行?因为它有如下限制:
仅支持文本数据传输, 无法传输二进制数据.
传输数据时, 没有进度信息提示, 只能提示是否完成.
受浏览器 同源策略 限制, 只能请求同域资源.
没有超时机制, 不方便掌控ajax请求节奏.
而XMLHttpRequest Level 2针对这些缺陷做出了改进:
支持二进制数据, 可以上传文件, 可以使用FormData对象管理表单.
提供进度提示, 可通过 xhr.upload.onprogress 事件回调方法获取传输进度.
依然受 同源策略 限制, 这个安全机制不会变. XHR2新提供 Access-Control-Allow-Origin 等headers, 设置为 * 时表示允许任何域名请求, 从而实现跨域CORS访问(有关CORS详细介绍请耐心往下读).
可以设置timeout 及 ontimeout, 方便设置超时时长和超时后续处理.
关于XMLHttpRequest的细节就不在这里赘述了。目前, 主流浏览器基本上都支持XHR2, 除了IE系列需要IE10及更高版本. 因此IE10以下是不支持XHR2的.
上面提到的FormData就是我们最常用的一种方式。通过在脚本里新建FormData对象,把File对象设置到表单项中,然后利用XMLHttpRequest异步上传到服务器:
完成最基本的需求无法满足我们对用户体验的追求,所以我们还想要支持上传进度显示和上传图片预览。
上传进度-progress
因为是XMLHttpRequest Level 2, 所以很容易就可以支持对上传进度的监听。细心地小伙伴会发现在chrome的developer tools的console里new一个XMLHttpRequest对象,就会发现实例xhr下挂载有onprogress事件,那是不是我们只要绑定XHR对象的progress事件就可以了呢?
很接近了,但是XHR对象的直属progress事件并不是用来监听上传资源(其实是下载)的进度的。XHR对象还有一个属性upload, 它返回一个XMLHttpRequestUpload 对象,
xhr.upload
对象拥有下列方法:XMLHttpRequestUpload挂载在XMLHttpRequest,两个下面都存在同名方法,区别是后者是用于加载资源时,而前者用于资源上传时。 其中onprogress 事件回调方法可用于跟踪资源上传的进度,它的event参数对象包含两个重要的属性loaded和total。分别代表当前已上传的字节数(number of bytes)和文件的总字节数。比如我们可以这样计算进度百分比:
其中事件的
lengthComputable属性
代表文件总大小是否可知。如果 lengthComputable 属性的值是 false,那么意味着总字节数是未知并且 total 的值为零。如果是现代HTML5浏览器,可以直接配合HTML5提供的
<progress>
其value属性绑定上面代码中的percentComplete的值即可。再进一步我们还可以对
<progress>
的样式统一调整,实现优雅降级方案。测试progress事件时可能遇到一个问题。一开始我设在onprogress事件回调里的断点总是只能走一次,并且loaded值始终等于total。觉得有点诡异,改用console.log打印loaded值不见效,当直接加大上传文件的大小到50MB,终于看到了5个不同的百分比值。
因为xhr.upload.onprogress在上传阶段(即xhr.send()之后,xhr.readystate=2之前)触发,每50ms触发一次。所以文件太小网络环境好的时候是直接到100%的。
[补充一下] xhr.readystate主要有四个状态(这个是挂载在XMLHttpRequest对象上的静态属性):
预览(主要针对图片预览)
普通青年的图片预览方式是待文件上传成功后,后台返回上传文件的url,然后把预览图片的img元素的src指向该url。这其实达不到预览的效果和目的。
属于文艺青年的现代浏览器又登场了:“使用HTML5的
FileReader API
吧!” 让我们直接上代码,直奔主题:方法1: reader.onload回调的result指向image的src
FileReader
实例有以下方法:使用FileReader来处理图片的异步加载,在创建新的FileReader对象之后,我们建立了onload函数,然后调用
readAsDataURL()
开始在后台进行读取操作。当图像文件加载后,转换成一个 data: URL 保存在result属性上,并传递到onload回调函数中设置给img的src。方法2: 无需FileReader, 直接将file转换URL
file本来就是就继承自Blob对象,可以
URL.createObjectURL()
函数创建URl二进制上传
有了FileReader,其实我们还有一种上传的途径,读取文件内容后直接以二进制格式上传。
不过chrome已经把XMLHttpRequest的sendAsBinary方法移除了【已证实】。 所以得自行实现一个pollify。
这段代码将字符串转成8位无符号整型,然后存放到一个8位无符号整型数组里面,再把整个数组发送出去。
blob格式上传
Blob 对象相当于一个容器,可以用于存放二进制数据。它有两个属性,size 属性表示字节长度,type 属性表示 MIME 类型。 file 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的上下文中。比如说, FileReader, URL.createObjectURL(), createImageBitmap(), 及 XMLHttpRequest.send() 都能处理 Blob 和 File。
可以利用blob进行下载、备份操作 比如:将canvas下载为一个图片文件【前端下载】
将字符串保存一个文件
FileReader 对象的 readAsText() 可以读取文件的文本,结合 Blob 对象下载文件的功能,那就可以实现将数据导出文件备份到本地,当数据要恢复时,通过 input 把备份文件上传,使用 readAsText() 读取文本,恢复数据。
base64上传类似
在 HTML5 中新增了 atob 和 btoa 方法来支持 Base64 编码。它们的命名也很简单,b to a 和 a to b,即代表着编码和解码。
btoa 方法对字符串 a 进行编码,不会改变 a 的值,返回一个编码后的值。 atob 方法对编码后的字符串进行解码。
但是参数中带中文,已经超出了8位ASCII编码的字符范围,浏览器就会报错。所以需要先对中文进行 encodeURIComponent 编码处理。
拖拽和裁剪的支持
拖拽上传和图片裁剪处理功能,这是高科技功能,可以帮你上传组件增加不少亮点; 其实主要是利用HTML5的drag & drop事件,我们可以很快实现对拖拽的支持。首先我们可能需要确定一个允许拖拽的区域,然后绑定相应的事件进行处理。
看代码
这里可以把通过事件对象的dataTransfer拿到的files数组和之前相同处理,以实现预览上传等功能。有了这些事件回调,我们也可以在不同的事件给我们UI元素添加不同的class来实现更好交互效果。
裁剪
借用iframe 做无刷新兼容
一个比较优雅的上传组件可以进入生产模式了。 但是这些高科技Api在IE9面前都是都是渣渣了。 什么?还要支持IE9?好吧,让我们来看看IE10以下的浏览器如何实现无刷新上传。
之前说了要实现文件上传使用FileUpload对象即可。这在低版本的IE里也是适用的。那我们为什么还要用iframe呢?
因为在现代浏览器中我们可以用XMLHttpRequest Level 2来支持二进制数据,异步文件上传,并且动态创建FormData。而低版本的IE里的XMLHttpRequest是Level 1。所以我们通过XHR异步向服务器发上传请求的路走不通了。只能老老实实的用form的submit。
而form的submit会导致页面的刷新。原因分析好了,那么答案就近在咫尺了。我们能不能让form的submit不刷新整个页面呢?答案就是利用iframe。把form的target指定到一个看不见的iframe,那么返回的数据就会被这个iframe接受,于是乎就只有这个iframe会刷新。而它又是看不见的,用户自然就感知不到了。
iframe的实现大致如此,但是如果文件上传的地址与当前页面不在同一个域下就会出现跨域问题。导致iframe的onload回调里的访问服务返回的数据失败。
这时我们再祭出JSONP这把'大宝剑',来解决跨域问题。首先在上传之前注册一个全局的函数,把函数名发给服务器。服务器需要配合在response里让浏览器直接调用这个函数。
// 如果已有其他参数,这里需要判断一下,改为拼接 &callback= form.action = form.action + '?callback=' + curCallbackName; 好了,实现一个文件上传组件的基本知识点大致总结了一下。
总结一波
整理下相关技术以及API:
<form>``<input type="file">
标签使用, css定制化原生表单;file
对象XMLHttpRequest
和XMLHttpRequestUpload
FormData
FileReader
Blob
/ArrayBuffer
...drag
/mousemove
jsonp
一个fileUpload插件封装