webuploader.html5only.js 205 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641464246434644464546464647464846494650465146524653465446554656465746584659466046614662466346644665466646674668466946704671467246734674467546764677467846794680468146824683468446854686468746884689469046914692469346944695469646974698469947004701470247034704470547064707470847094710471147124713471447154716471747184719472047214722472347244725472647274728472947304731473247334734473547364737473847394740474147424743474447454746474747484749475047514752475347544755475647574758475947604761476247634764476547664767476847694770477147724773477447754776477747784779478047814782478347844785478647874788478947904791479247934794479547964797479847994800480148024803480448054806480748084809481048114812481348144815481648174818481948204821482248234824482548264827482848294830483148324833483448354836483748384839484048414842484348444845484648474848484948504851485248534854485548564857485848594860486148624863486448654866486748684869487048714872487348744875487648774878487948804881488248834884488548864887488848894890489148924893489448954896489748984899490049014902490349044905490649074908490949104911491249134914491549164917491849194920492149224923492449254926492749284929493049314932493349344935493649374938493949404941494249434944494549464947494849494950495149524953495449554956495749584959496049614962496349644965496649674968496949704971497249734974497549764977497849794980498149824983498449854986498749884989499049914992499349944995499649974998499950005001500250035004500550065007500850095010501150125013501450155016501750185019502050215022502350245025502650275028502950305031503250335034503550365037503850395040504150425043504450455046504750485049505050515052505350545055505650575058505950605061506250635064506550665067506850695070507150725073507450755076507750785079508050815082508350845085508650875088508950905091509250935094509550965097509850995100510151025103510451055106510751085109511051115112511351145115511651175118511951205121512251235124512551265127512851295130513151325133513451355136513751385139514051415142514351445145514651475148514951505151515251535154515551565157515851595160516151625163516451655166516751685169517051715172517351745175517651775178517951805181518251835184518551865187518851895190519151925193519451955196519751985199520052015202520352045205520652075208520952105211521252135214521552165217521852195220522152225223522452255226522752285229523052315232523352345235523652375238523952405241524252435244524552465247524852495250525152525253525452555256525752585259526052615262526352645265526652675268526952705271527252735274527552765277527852795280528152825283528452855286528752885289529052915292529352945295529652975298529953005301530253035304530553065307530853095310531153125313531453155316531753185319532053215322532353245325532653275328532953305331533253335334533553365337533853395340534153425343534453455346534753485349535053515352535353545355535653575358535953605361536253635364536553665367536853695370537153725373537453755376537753785379538053815382538353845385538653875388538953905391539253935394539553965397539853995400540154025403540454055406540754085409541054115412541354145415541654175418541954205421542254235424542554265427542854295430543154325433543454355436543754385439544054415442544354445445544654475448544954505451545254535454545554565457545854595460546154625463546454655466546754685469547054715472547354745475547654775478547954805481548254835484548554865487548854895490549154925493549454955496549754985499550055015502550355045505550655075508550955105511551255135514551555165517551855195520552155225523552455255526552755285529553055315532553355345535553655375538553955405541554255435544554555465547554855495550555155525553555455555556555755585559556055615562556355645565556655675568556955705571557255735574557555765577557855795580558155825583558455855586558755885589559055915592559355945595559655975598559956005601560256035604560556065607560856095610561156125613561456155616561756185619562056215622562356245625562656275628562956305631563256335634563556365637563856395640564156425643564456455646564756485649565056515652565356545655565656575658565956605661566256635664566556665667566856695670567156725673567456755676567756785679568056815682568356845685568656875688568956905691569256935694569556965697569856995700570157025703570457055706570757085709571057115712571357145715571657175718571957205721572257235724572557265727572857295730573157325733573457355736573757385739574057415742574357445745574657475748574957505751575257535754575557565757575857595760576157625763576457655766576757685769577057715772577357745775577657775778577957805781578257835784578557865787578857895790579157925793579457955796579757985799580058015802580358045805580658075808580958105811581258135814581558165817581858195820582158225823582458255826582758285829583058315832583358345835583658375838583958405841584258435844584558465847584858495850585158525853585458555856585758585859586058615862586358645865586658675868586958705871587258735874587558765877587858795880588158825883588458855886588758885889589058915892589358945895589658975898589959005901590259035904590559065907590859095910591159125913591459155916591759185919592059215922592359245925592659275928592959305931593259335934593559365937593859395940594159425943594459455946594759485949595059515952595359545955595659575958595959605961596259635964596559665967596859695970597159725973597459755976597759785979598059815982598359845985598659875988598959905991599259935994599559965997599859996000600160026003600460056006600760086009601060116012601360146015601660176018601960206021602260236024602560266027602860296030603160326033603460356036603760386039604060416042604360446045604660476048604960506051605260536054605560566057605860596060606160626063606460656066606760686069607060716072607360746075607660776078607960806081608260836084608560866087608860896090609160926093609460956096609760986099610061016102610361046105610661076108610961106111611261136114611561166117611861196120612161226123612461256126612761286129613061316132613361346135613661376138613961406141614261436144614561466147614861496150615161526153615461556156
  1. /*! WebUploader 0.1.8-alpha */
  2. /**
  3. * @fileOverview 让内部各个部件的代码可以用[amd](https://github.com/amdjs/amdjs-api/wiki/AMD)模块定义方式组织起来。
  4. *
  5. * AMD API 内部的简单不完全实现,请忽略。只有当WebUploader被合并成一个文件的时候才会引入。
  6. */
  7. (function( root, factory ) {
  8. var modules = {},
  9. // 内部require, 简单不完全实现。
  10. // https://github.com/amdjs/amdjs-api/wiki/require
  11. _require = function( deps, callback ) {
  12. var args, len, i;
  13. // 如果deps不是数组,则直接返回指定module
  14. if ( typeof deps === 'string' ) {
  15. return getModule( deps );
  16. } else {
  17. args = [];
  18. for( len = deps.length, i = 0; i < len; i++ ) {
  19. args.push( getModule( deps[ i ] ) );
  20. }
  21. return callback.apply( null, args );
  22. }
  23. },
  24. // 内部define,暂时不支持不指定id.
  25. _define = function( id, deps, factory ) {
  26. if ( arguments.length === 2 ) {
  27. factory = deps;
  28. deps = null;
  29. }
  30. _require( deps || [], function() {
  31. setModule( id, factory, arguments );
  32. });
  33. },
  34. // 设置module, 兼容CommonJs写法。
  35. setModule = function( id, factory, args ) {
  36. var module = {
  37. exports: factory
  38. },
  39. returned;
  40. if ( typeof factory === 'function' ) {
  41. args.length || (args = [ _require, module.exports, module ]);
  42. returned = factory.apply( null, args );
  43. returned !== undefined && (module.exports = returned);
  44. }
  45. modules[ id ] = module.exports;
  46. },
  47. // 根据id获取module
  48. getModule = function( id ) {
  49. var module = modules[ id ] || root[ id ];
  50. if ( !module ) {
  51. throw new Error( '`' + id + '` is undefined' );
  52. }
  53. return module;
  54. },
  55. // 将所有modules,将路径ids装换成对象。
  56. exportsTo = function( obj ) {
  57. var key, host, parts, part, last, ucFirst;
  58. // make the first character upper case.
  59. ucFirst = function( str ) {
  60. return str && (str.charAt( 0 ).toUpperCase() + str.substr( 1 ));
  61. };
  62. for ( key in modules ) {
  63. host = obj;
  64. if ( !modules.hasOwnProperty( key ) ) {
  65. continue;
  66. }
  67. parts = key.split('/');
  68. last = ucFirst( parts.pop() );
  69. while( (part = ucFirst( parts.shift() )) ) {
  70. host[ part ] = host[ part ] || {};
  71. host = host[ part ];
  72. }
  73. host[ last ] = modules[ key ];
  74. }
  75. return obj;
  76. },
  77. makeExport = function( dollar ) {
  78. root.__dollar = dollar;
  79. // exports every module.
  80. return exportsTo( factory( root, _define, _require ) );
  81. },
  82. origin;
  83. if ( typeof module === 'object' && typeof module.exports === 'object' ) {
  84. // For CommonJS and CommonJS-like environments where a proper window is present,
  85. module.exports = makeExport();
  86. } else if ( typeof define === 'function' && define.amd ) {
  87. // Allow using this built library as an AMD module
  88. // in another project. That other project will only
  89. // see this AMD call, not the internal modules in
  90. // the closure below.
  91. define([ 'jquery' ], makeExport );
  92. } else {
  93. // Browser globals case. Just assign the
  94. // result to a property on the global.
  95. origin = root.WebUploader;
  96. root.WebUploader = makeExport();
  97. root.WebUploader.noConflict = function() {
  98. root.WebUploader = origin;
  99. };
  100. }
  101. })( window, function( window, define, require ) {
  102. /**
  103. * @fileOverview jQuery or Zepto
  104. * @require "jquery"
  105. * @require "zepto"
  106. */
  107. define('dollar-third',[],function() {
  108. var req = window.require;
  109. var $ = window.__dollar ||
  110. window.jQuery ||
  111. window.Zepto ||
  112. req('jquery') ||
  113. req('zepto');
  114. if ( !$ ) {
  115. throw new Error('jQuery or Zepto not found!');
  116. }
  117. return $;
  118. });
  119. /**
  120. * @fileOverview Dom 操作相关
  121. */
  122. define('dollar',[
  123. 'dollar-third'
  124. ], function( _ ) {
  125. return _;
  126. });
  127. /**
  128. * @fileOverview 使用jQuery的Promise
  129. */
  130. define('promise-third',[
  131. 'dollar'
  132. ], function( $ ) {
  133. return {
  134. Deferred: $.Deferred,
  135. when: $.when,
  136. isPromise: function( anything ) {
  137. return anything && typeof anything.then === 'function';
  138. }
  139. };
  140. });
  141. /**
  142. * @fileOverview Promise/A+
  143. */
  144. define('promise',[
  145. 'promise-third'
  146. ], function( _ ) {
  147. return _;
  148. });
  149. /**
  150. * @fileOverview 基础类方法。
  151. */
  152. /**
  153. * Web Uploader内部类的详细说明,以下提及的功能类,都可以在`WebUploader`这个变量中访问到。
  154. *
  155. * As you know, Web Uploader的每个文件都是用过[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD)规范中的`define`组织起来的, 每个Module都会有个module id.
  156. * 默认module id为该文件的路径,而此路径将会转化成名字空间存放在WebUploader中。如:
  157. *
  158. * * module `base`:WebUploader.Base
  159. * * module `file`: WebUploader.File
  160. * * module `lib/dnd`: WebUploader.Lib.Dnd
  161. * * module `runtime/html5/dnd`: WebUploader.Runtime.Html5.Dnd
  162. *
  163. *
  164. * 以下文档中对类的使用可能省略掉了`WebUploader`前缀。
  165. * @module WebUploader
  166. * @title WebUploader API文档
  167. */
  168. define('base',[
  169. 'dollar',
  170. 'promise'
  171. ], function( $, promise ) {
  172. var noop = function() {},
  173. call = Function.call;
  174. // http://jsperf.com/uncurrythis
  175. // 反科里化
  176. function uncurryThis( fn ) {
  177. return function() {
  178. return call.apply( fn, arguments );
  179. };
  180. }
  181. function bindFn( fn, context ) {
  182. return function() {
  183. return fn.apply( context, arguments );
  184. };
  185. }
  186. function createObject( proto ) {
  187. var f;
  188. if ( Object.create ) {
  189. return Object.create( proto );
  190. } else {
  191. f = function() {};
  192. f.prototype = proto;
  193. return new f();
  194. }
  195. }
  196. /**
  197. * 基础类,提供一些简单常用的方法。
  198. * @class Base
  199. */
  200. return {
  201. /**
  202. * @property {String} version 当前版本号。
  203. */
  204. version: '0.1.8-alpha',
  205. /**
  206. * @property {jQuery|Zepto} $ 引用依赖的jQuery或者Zepto对象。
  207. */
  208. $: $,
  209. Deferred: promise.Deferred,
  210. isPromise: promise.isPromise,
  211. when: promise.when,
  212. /**
  213. * @description 简单的浏览器检查结果。
  214. *
  215. * * `webkit` webkit版本号,如果浏览器为非webkit内核,此属性为`undefined`。
  216. * * `chrome` chrome浏览器版本号,如果浏览器为chrome,此属性为`undefined`。
  217. * * `ie` ie浏览器版本号,如果浏览器为非ie,此属性为`undefined`。**暂不支持ie10+**
  218. * * `firefox` firefox浏览器版本号,如果浏览器为非firefox,此属性为`undefined`。
  219. * * `safari` safari浏览器版本号,如果浏览器为非safari,此属性为`undefined`。
  220. * * `opera` opera浏览器版本号,如果浏览器为非opera,此属性为`undefined`。
  221. *
  222. * @property {Object} [browser]
  223. */
  224. browser: (function( ua ) {
  225. var ret = {},
  226. webkit = ua.match( /WebKit\/([\d.]+)/ ),
  227. chrome = ua.match( /Chrome\/([\d.]+)/ ) ||
  228. ua.match( /CriOS\/([\d.]+)/ ),
  229. ie = ua.match( /MSIE\s([\d\.]+)/ ) ||
  230. ua.match( /(?:trident)(?:.*rv:([\w.]+))?/i ),
  231. firefox = ua.match( /Firefox\/([\d.]+)/ ),
  232. safari = ua.match( /Safari\/([\d.]+)/ ),
  233. opera = ua.match( /OPR\/([\d.]+)/ );
  234. webkit && (ret.webkit = parseFloat( webkit[ 1 ] ));
  235. chrome && (ret.chrome = parseFloat( chrome[ 1 ] ));
  236. ie && (ret.ie = parseFloat( ie[ 1 ] ));
  237. firefox && (ret.firefox = parseFloat( firefox[ 1 ] ));
  238. safari && (ret.safari = parseFloat( safari[ 1 ] ));
  239. opera && (ret.opera = parseFloat( opera[ 1 ] ));
  240. return ret;
  241. })( navigator.userAgent ),
  242. /**
  243. * @description 操作系统检查结果。
  244. *
  245. * * `android` 如果在android浏览器环境下,此值为对应的android版本号,否则为`undefined`。
  246. * * `ios` 如果在ios浏览器环境下,此值为对应的ios版本号,否则为`undefined`。
  247. * @property {Object} [os]
  248. */
  249. os: (function( ua ) {
  250. var ret = {},
  251. // osx = !!ua.match( /\(Macintosh\; Intel / ),
  252. android = ua.match( /(?:Android);?[\s\/]+([\d.]+)?/ ),
  253. ios = ua.match( /(?:iPad|iPod|iPhone).*OS\s([\d_]+)/ );
  254. // osx && (ret.osx = true);
  255. android && (ret.android = parseFloat( android[ 1 ] ));
  256. ios && (ret.ios = parseFloat( ios[ 1 ].replace( /_/g, '.' ) ));
  257. return ret;
  258. })( navigator.userAgent ),
  259. /**
  260. * 实现类与类之间的继承。
  261. * @method inherits
  262. * @grammar Base.inherits( super ) => child
  263. * @grammar Base.inherits( super, protos ) => child
  264. * @grammar Base.inherits( super, protos, statics ) => child
  265. * @param {Class} super 父类
  266. * @param {Object | Function} [protos] 子类或者对象。如果对象中包含constructor,子类将是用此属性值。
  267. * @param {Function} [protos.constructor] 子类构造器,不指定的话将创建个临时的直接执行父类构造器的方法。
  268. * @param {Object} [statics] 静态属性或方法。
  269. * @return {Class} 返回子类。
  270. * @example
  271. * function Person() {
  272. * console.log( 'Super' );
  273. * }
  274. * Person.prototype.hello = function() {
  275. * console.log( 'hello' );
  276. * };
  277. *
  278. * var Manager = Base.inherits( Person, {
  279. * world: function() {
  280. * console.log( 'World' );
  281. * }
  282. * });
  283. *
  284. * // 因为没有指定构造器,父类的构造器将会执行。
  285. * var instance = new Manager(); // => Super
  286. *
  287. * // 继承子父类的方法
  288. * instance.hello(); // => hello
  289. * instance.world(); // => World
  290. *
  291. * // 子类的__super__属性指向父类
  292. * console.log( Manager.__super__ === Person ); // => true
  293. */
  294. inherits: function( Super, protos, staticProtos ) {
  295. var child;
  296. if ( typeof protos === 'function' ) {
  297. child = protos;
  298. protos = null;
  299. } else if ( protos && protos.hasOwnProperty('constructor') ) {
  300. child = protos.constructor;
  301. } else {
  302. child = function() {
  303. return Super.apply( this, arguments );
  304. };
  305. }
  306. // 复制静态方法
  307. $.extend( true, child, Super, staticProtos || {} );
  308. /* jshint camelcase: false */
  309. // 让子类的__super__属性指向父类。
  310. child.__super__ = Super.prototype;
  311. // 构建原型,添加原型方法或属性。
  312. // 暂时用Object.create实现。
  313. child.prototype = createObject( Super.prototype );
  314. protos && $.extend( true, child.prototype, protos );
  315. return child;
  316. },
  317. /**
  318. * 一个不做任何事情的方法。可以用来赋值给默认的callback.
  319. * @method noop
  320. */
  321. noop: noop,
  322. /**
  323. * 返回一个新的方法,此方法将已指定的`context`来执行。
  324. * @grammar Base.bindFn( fn, context ) => Function
  325. * @method bindFn
  326. * @example
  327. * var doSomething = function() {
  328. * console.log( this.name );
  329. * },
  330. * obj = {
  331. * name: 'Object Name'
  332. * },
  333. * aliasFn = Base.bind( doSomething, obj );
  334. *
  335. * aliasFn(); // => Object Name
  336. *
  337. */
  338. bindFn: bindFn,
  339. /**
  340. * 引用Console.log如果存在的话,否则引用一个[空函数noop](#WebUploader:Base.noop)。
  341. * @grammar Base.log( args... ) => undefined
  342. * @method log
  343. */
  344. log: (function() {
  345. if ( window.console ) {
  346. return bindFn( console.log, console );
  347. }
  348. return noop;
  349. })(),
  350. nextTick: (function() {
  351. return function( cb ) {
  352. setTimeout( cb, 1 );
  353. };
  354. // @bug 当浏览器不在当前窗口时就停了。
  355. // var next = window.requestAnimationFrame ||
  356. // window.webkitRequestAnimationFrame ||
  357. // window.mozRequestAnimationFrame ||
  358. // function( cb ) {
  359. // window.setTimeout( cb, 1000 / 60 );
  360. // };
  361. // // fix: Uncaught TypeError: Illegal invocation
  362. // return bindFn( next, window );
  363. })(),
  364. /**
  365. * 被[uncurrythis](http://www.2ality.com/2011/11/uncurrying-this.html)的数组slice方法。
  366. * 将用来将非数组对象转化成数组对象。
  367. * @grammar Base.slice( target, start[, end] ) => Array
  368. * @method slice
  369. * @example
  370. * function doSomthing() {
  371. * var args = Base.slice( arguments, 1 );
  372. * console.log( args );
  373. * }
  374. *
  375. * doSomthing( 'ignored', 'arg2', 'arg3' ); // => Array ["arg2", "arg3"]
  376. */
  377. slice: uncurryThis( [].slice ),
  378. /**
  379. * 生成唯一的ID
  380. * @method guid
  381. * @grammar Base.guid() => String
  382. * @grammar Base.guid( prefx ) => String
  383. */
  384. guid: (function() {
  385. var counter = 0;
  386. return function( prefix ) {
  387. var guid = (+new Date()).toString( 32 ),
  388. i = 0;
  389. for ( ; i < 5; i++ ) {
  390. guid += Math.floor( Math.random() * 65535 ).toString( 32 );
  391. }
  392. return (prefix || 'wu_') + guid + (counter++).toString( 32 );
  393. };
  394. })(),
  395. /**
  396. * 格式化文件大小, 输出成带单位的字符串
  397. * @method formatSize
  398. * @grammar Base.formatSize( size ) => String
  399. * @grammar Base.formatSize( size, pointLength ) => String
  400. * @grammar Base.formatSize( size, pointLength, units ) => String
  401. * @param {Number} size 文件大小
  402. * @param {Number} [pointLength=2] 精确到的小数点数。
  403. * @param {Array} [units=[ 'B', 'K', 'M', 'G', 'TB' ]] 单位数组。从字节,到千字节,一直往上指定。如果单位数组里面只指定了到了K(千字节),同时文件大小大于M, 此方法的输出将还是显示成多少K.
  404. * @example
  405. * console.log( Base.formatSize( 100 ) ); // => 100B
  406. * console.log( Base.formatSize( 1024 ) ); // => 1.00K
  407. * console.log( Base.formatSize( 1024, 0 ) ); // => 1K
  408. * console.log( Base.formatSize( 1024 * 1024 ) ); // => 1.00M
  409. * console.log( Base.formatSize( 1024 * 1024 * 1024 ) ); // => 1.00G
  410. * console.log( Base.formatSize( 1024 * 1024 * 1024, 0, ['B', 'KB', 'MB'] ) ); // => 1024MB
  411. */
  412. formatSize: function( size, pointLength, units ) {
  413. var unit;
  414. units = units || [ 'B', 'K', 'M', 'G', 'TB' ];
  415. while ( (unit = units.shift()) && size > 1024 ) {
  416. size = size / 1024;
  417. }
  418. return (unit === 'B' ? size : size.toFixed( pointLength || 2 )) +
  419. unit;
  420. }
  421. };
  422. });
  423. /**
  424. * 事件处理类,可以独立使用,也可以扩展给对象使用。
  425. * @fileOverview Mediator
  426. */
  427. define('mediator',[
  428. 'base'
  429. ], function( Base ) {
  430. var $ = Base.$,
  431. slice = [].slice,
  432. separator = /\s+/,
  433. protos;
  434. // 根据条件过滤出事件handlers.
  435. function findHandlers( arr, name, callback, context ) {
  436. return $.grep( arr, function( handler ) {
  437. return handler &&
  438. (!name || handler.e === name) &&
  439. (!callback || handler.cb === callback ||
  440. handler.cb._cb === callback) &&
  441. (!context || handler.ctx === context);
  442. });
  443. }
  444. function eachEvent( events, callback, iterator ) {
  445. // 不支持对象,只支持多个event用空格隔开
  446. $.each( (events || '').split( separator ), function( _, key ) {
  447. iterator( key, callback );
  448. });
  449. }
  450. function triggerHanders( events, args ) {
  451. var stoped = false,
  452. i = -1,
  453. len = events.length,
  454. handler;
  455. while ( ++i < len ) {
  456. handler = events[ i ];
  457. if ( handler.cb.apply( handler.ctx2, args ) === false ) {
  458. stoped = true;
  459. break;
  460. }
  461. }
  462. return !stoped;
  463. }
  464. protos = {
  465. /**
  466. * 绑定事件。
  467. *
  468. * `callback`方法在执行时,arguments将会来源于trigger的时候携带的参数。如
  469. * ```javascript
  470. * var obj = {};
  471. *
  472. * // 使得obj有事件行为
  473. * Mediator.installTo( obj );
  474. *
  475. * obj.on( 'testa', function( arg1, arg2 ) {
  476. * console.log( arg1, arg2 ); // => 'arg1', 'arg2'
  477. * });
  478. *
  479. * obj.trigger( 'testa', 'arg1', 'arg2' );
  480. * ```
  481. *
  482. * 如果`callback`中,某一个方法`return false`了,则后续的其他`callback`都不会被执行到。
  483. * 切会影响到`trigger`方法的返回值,为`false`。
  484. *
  485. * `on`还可以用来添加一个特殊事件`all`, 这样所有的事件触发都会响应到。同时此类`callback`中的arguments有一个不同处,
  486. * 就是第一个参数为`type`,记录当前是什么事件在触发。此类`callback`的优先级比脚低,会再正常`callback`执行完后触发。
  487. * ```javascript
  488. * obj.on( 'all', function( type, arg1, arg2 ) {
  489. * console.log( type, arg1, arg2 ); // => 'testa', 'arg1', 'arg2'
  490. * });
  491. * ```
  492. *
  493. * @method on
  494. * @grammar on( name, callback[, context] ) => self
  495. * @param {String} name 事件名,支持多个事件用空格隔开
  496. * @param {Function} callback 事件处理器
  497. * @param {Object} [context] 事件处理器的上下文。
  498. * @return {self} 返回自身,方便链式
  499. * @chainable
  500. * @class Mediator
  501. */
  502. on: function( name, callback, context ) {
  503. var me = this,
  504. set;
  505. if ( !callback ) {
  506. return this;
  507. }
  508. set = this._events || (this._events = []);
  509. eachEvent( name, callback, function( name, callback ) {
  510. var handler = { e: name };
  511. handler.cb = callback;
  512. handler.ctx = context;
  513. handler.ctx2 = context || me;
  514. handler.id = set.length;
  515. set.push( handler );
  516. });
  517. return this;
  518. },
  519. /**
  520. * 绑定事件,且当handler执行完后,自动解除绑定。
  521. * @method once
  522. * @grammar once( name, callback[, context] ) => self
  523. * @param {String} name 事件名
  524. * @param {Function} callback 事件处理器
  525. * @param {Object} [context] 事件处理器的上下文。
  526. * @return {self} 返回自身,方便链式
  527. * @chainable
  528. */
  529. once: function( name, callback, context ) {
  530. var me = this;
  531. if ( !callback ) {
  532. return me;
  533. }
  534. eachEvent( name, callback, function( name, callback ) {
  535. var once = function() {
  536. me.off( name, once );
  537. return callback.apply( context || me, arguments );
  538. };
  539. once._cb = callback;
  540. me.on( name, once, context );
  541. });
  542. return me;
  543. },
  544. /**
  545. * 解除事件绑定
  546. * @method off
  547. * @grammar off( [name[, callback[, context] ] ] ) => self
  548. * @param {String} [name] 事件名
  549. * @param {Function} [callback] 事件处理器
  550. * @param {Object} [context] 事件处理器的上下文。
  551. * @return {self} 返回自身,方便链式
  552. * @chainable
  553. */
  554. off: function( name, cb, ctx ) {
  555. var events = this._events;
  556. if ( !events ) {
  557. return this;
  558. }
  559. if ( !name && !cb && !ctx ) {
  560. this._events = [];
  561. return this;
  562. }
  563. eachEvent( name, cb, function( name, cb ) {
  564. $.each( findHandlers( events, name, cb, ctx ), function() {
  565. delete events[ this.id ];
  566. });
  567. });
  568. return this;
  569. },
  570. /**
  571. * 触发事件
  572. * @method trigger
  573. * @grammar trigger( name[, args...] ) => self
  574. * @param {String} type 事件名
  575. * @param {*} [...] 任意参数
  576. * @return {Boolean} 如果handler中return false了,则返回false, 否则返回true
  577. */
  578. trigger: function( type ) {
  579. var args, events, allEvents;
  580. if ( !this._events || !type ) {
  581. return this;
  582. }
  583. args = slice.call( arguments, 1 );
  584. events = findHandlers( this._events, type );
  585. allEvents = findHandlers( this._events, 'all' );
  586. return triggerHanders( events, args ) &&
  587. triggerHanders( allEvents, arguments );
  588. }
  589. };
  590. /**
  591. * 中介者,它本身是个单例,但可以通过[installTo](#WebUploader:Mediator:installTo)方法,使任何对象具备事件行为。
  592. * 主要目的是负责模块与模块之间的合作,降低耦合度。
  593. *
  594. * @class Mediator
  595. */
  596. return $.extend({
  597. /**
  598. * 可以通过这个接口,使任何对象具备事件功能。
  599. * @method installTo
  600. * @param {Object} obj 需要具备事件行为的对象。
  601. * @return {Object} 返回obj.
  602. */
  603. installTo: function( obj ) {
  604. return $.extend( obj, protos );
  605. }
  606. }, protos );
  607. });
  608. /**
  609. * @fileOverview Uploader上传类
  610. */
  611. define('uploader',[
  612. 'base',
  613. 'mediator'
  614. ], function( Base, Mediator ) {
  615. var $ = Base.$;
  616. /**
  617. * 上传入口类。
  618. * @class Uploader
  619. * @constructor
  620. * @grammar new Uploader( opts ) => Uploader
  621. * @example
  622. * var uploader = WebUploader.Uploader({
  623. * swf: 'path_of_swf/Uploader.swf',
  624. *
  625. * // 开起分片上传。
  626. * chunked: true
  627. * });
  628. */
  629. function Uploader( opts ) {
  630. this.options = $.extend( true, {}, Uploader.options, opts );
  631. this._init( this.options );
  632. }
  633. // default Options
  634. // widgets中有相应扩展
  635. Uploader.options = {};
  636. Mediator.installTo( Uploader.prototype );
  637. // 批量添加纯命令式方法。
  638. $.each({
  639. upload: 'start-upload',
  640. stop: 'stop-upload',
  641. getFile: 'get-file',
  642. getFiles: 'get-files',
  643. addFile: 'add-file',
  644. addFiles: 'add-file',
  645. sort: 'sort-files',
  646. removeFile: 'remove-file',
  647. cancelFile: 'cancel-file',
  648. skipFile: 'skip-file',
  649. retry: 'retry',
  650. isInProgress: 'is-in-progress',
  651. makeThumb: 'make-thumb',
  652. md5File: 'md5-file',
  653. getDimension: 'get-dimension',
  654. addButton: 'add-btn',
  655. predictRuntimeType: 'predict-runtime-type',
  656. refresh: 'refresh',
  657. disable: 'disable',
  658. enable: 'enable',
  659. reset: 'reset'
  660. }, function( fn, command ) {
  661. Uploader.prototype[ fn ] = function() {
  662. return this.request( command, arguments );
  663. };
  664. });
  665. $.extend( Uploader.prototype, {
  666. state: 'pending',
  667. _init: function( opts ) {
  668. var me = this;
  669. me.request( 'init', opts, function() {
  670. me.state = 'ready';
  671. me.trigger('ready');
  672. });
  673. },
  674. /**
  675. * 获取或者设置Uploader配置项。
  676. * @method option
  677. * @grammar option( key ) => *
  678. * @grammar option( key, val ) => self
  679. * @example
  680. *
  681. * // 初始状态图片上传前不会压缩
  682. * var uploader = new WebUploader.Uploader({
  683. * compress: null;
  684. * });
  685. *
  686. * // 修改后图片上传前,尝试将图片压缩到1600 * 1600
  687. * uploader.option( 'compress', {
  688. * width: 1600,
  689. * height: 1600
  690. * });
  691. */
  692. option: function( key, val ) {
  693. var opts = this.options;
  694. // setter
  695. if ( arguments.length > 1 ) {
  696. if ( $.isPlainObject( val ) &&
  697. $.isPlainObject( opts[ key ] ) ) {
  698. $.extend( opts[ key ], val );
  699. } else {
  700. opts[ key ] = val;
  701. }
  702. } else { // getter
  703. return key ? opts[ key ] : opts;
  704. }
  705. },
  706. /**
  707. * 获取文件统计信息。返回一个包含一下信息的对象。
  708. * * `successNum` 上传成功的文件数
  709. * * `progressNum` 上传中的文件数
  710. * * `cancelNum` 被删除的文件数
  711. * * `invalidNum` 无效的文件数
  712. * * `uploadFailNum` 上传失败的文件数
  713. * * `queueNum` 还在队列中的文件数
  714. * * `interruptNum` 被暂停的文件数
  715. * @method getStats
  716. * @grammar getStats() => Object
  717. */
  718. getStats: function() {
  719. // return this._mgr.getStats.apply( this._mgr, arguments );
  720. var stats = this.request('get-stats');
  721. return stats ? {
  722. successNum: stats.numOfSuccess,
  723. progressNum: stats.numOfProgress,
  724. // who care?
  725. // queueFailNum: 0,
  726. cancelNum: stats.numOfCancel,
  727. invalidNum: stats.numOfInvalid,
  728. uploadFailNum: stats.numOfUploadFailed,
  729. queueNum: stats.numOfQueue,
  730. interruptNum: stats.numOfInterrupt
  731. } : {};
  732. },
  733. // 需要重写此方法来来支持opts.onEvent和instance.onEvent的处理器
  734. trigger: function( type/*, args...*/ ) {
  735. var args = [].slice.call( arguments, 1 ),
  736. opts = this.options,
  737. name = 'on' + type.substring( 0, 1 ).toUpperCase() +
  738. type.substring( 1 );
  739. if (
  740. // 调用通过on方法注册的handler.
  741. Mediator.trigger.apply( this, arguments ) === false ||
  742. // 调用opts.onEvent
  743. $.isFunction( opts[ name ] ) &&
  744. opts[ name ].apply( this, args ) === false ||
  745. // 调用this.onEvent
  746. $.isFunction( this[ name ] ) &&
  747. this[ name ].apply( this, args ) === false ||
  748. // 广播所有uploader的事件。
  749. Mediator.trigger.apply( Mediator,
  750. [ this, type ].concat( args ) ) === false ) {
  751. return false;
  752. }
  753. return true;
  754. },
  755. /**
  756. * 销毁 webuploader 实例
  757. * @method destroy
  758. * @grammar destroy() => undefined
  759. */
  760. destroy: function() {
  761. this.request( 'destroy', arguments );
  762. this.off();
  763. },
  764. // widgets/widget.js将补充此方法的详细文档。
  765. request: Base.noop
  766. });
  767. /**
  768. * 创建Uploader实例,等同于new Uploader( opts );
  769. * @method create
  770. * @class Base
  771. * @static
  772. * @grammar Base.create( opts ) => Uploader
  773. */
  774. Base.create = Uploader.create = function( opts ) {
  775. return new Uploader( opts );
  776. };
  777. // 暴露Uploader,可以通过它来扩展业务逻辑。
  778. Base.Uploader = Uploader;
  779. return Uploader;
  780. });
  781. /**
  782. * @fileOverview Runtime管理器,负责Runtime的选择, 连接
  783. */
  784. define('runtime/runtime',[
  785. 'base',
  786. 'mediator'
  787. ], function( Base, Mediator ) {
  788. var $ = Base.$,
  789. factories = {},
  790. // 获取对象的第一个key
  791. getFirstKey = function( obj ) {
  792. for ( var key in obj ) {
  793. if ( obj.hasOwnProperty( key ) ) {
  794. return key;
  795. }
  796. }
  797. return null;
  798. };
  799. // 接口类。
  800. function Runtime( options ) {
  801. this.options = $.extend({
  802. container: document.body
  803. }, options );
  804. this.uid = Base.guid('rt_');
  805. }
  806. $.extend( Runtime.prototype, {
  807. getContainer: function() {
  808. var opts = this.options,
  809. parent, container;
  810. if ( this._container ) {
  811. return this._container;
  812. }
  813. parent = $( opts.container || document.body );
  814. container = $( document.createElement('div') );
  815. container.attr( 'id', 'rt_' + this.uid );
  816. container.css({
  817. position: 'absolute',
  818. top: '0px',
  819. left: '0px',
  820. width: '1px',
  821. height: '1px',
  822. overflow: 'hidden'
  823. });
  824. parent.append( container );
  825. parent.addClass('webuploader-container');
  826. this._container = container;
  827. this._parent = parent;
  828. return container;
  829. },
  830. init: Base.noop,
  831. exec: Base.noop,
  832. destroy: function() {
  833. this._container && this._container.remove();
  834. this._parent && this._parent.removeClass('webuploader-container');
  835. this.off();
  836. }
  837. });
  838. Runtime.orders = 'html5,flash';
  839. /**
  840. * 添加Runtime实现。
  841. * @param {String} type 类型
  842. * @param {Runtime} factory 具体Runtime实现。
  843. */
  844. Runtime.addRuntime = function( type, factory ) {
  845. factories[ type ] = factory;
  846. };
  847. Runtime.hasRuntime = function( type ) {
  848. return !!(type ? factories[ type ] : getFirstKey( factories ));
  849. };
  850. Runtime.create = function( opts, orders ) {
  851. var type, runtime;
  852. orders = orders || Runtime.orders;
  853. $.each( orders.split( /\s*,\s*/g ), function() {
  854. if ( factories[ this ] ) {
  855. type = this;
  856. return false;
  857. }
  858. });
  859. type = type || getFirstKey( factories );
  860. if ( !type ) {
  861. throw new Error('Runtime Error');
  862. }
  863. runtime = new factories[ type ]( opts );
  864. return runtime;
  865. };
  866. Mediator.installTo( Runtime.prototype );
  867. return Runtime;
  868. });
  869. /**
  870. * @fileOverview Runtime管理器,负责Runtime的选择, 连接
  871. */
  872. define('runtime/client',[
  873. 'base',
  874. 'mediator',
  875. 'runtime/runtime'
  876. ], function( Base, Mediator, Runtime ) {
  877. var cache;
  878. cache = (function() {
  879. var obj = {};
  880. return {
  881. add: function( runtime ) {
  882. obj[ runtime.uid ] = runtime;
  883. },
  884. get: function( ruid, standalone ) {
  885. var i;
  886. if ( ruid ) {
  887. return obj[ ruid ];
  888. }
  889. for ( i in obj ) {
  890. // 有些类型不能重用,比如filepicker.
  891. if ( standalone && obj[ i ].__standalone ) {
  892. continue;
  893. }
  894. return obj[ i ];
  895. }
  896. return null;
  897. },
  898. remove: function( runtime ) {
  899. delete obj[ runtime.uid ];
  900. }
  901. };
  902. })();
  903. function RuntimeClient( component, standalone ) {
  904. var deferred = Base.Deferred(),
  905. runtime;
  906. this.uid = Base.guid('client_');
  907. // 允许runtime没有初始化之前,注册一些方法在初始化后执行。
  908. this.runtimeReady = function( cb ) {
  909. return deferred.done( cb );
  910. };
  911. this.connectRuntime = function( opts, cb ) {
  912. // already connected.
  913. if ( runtime ) {
  914. throw new Error('already connected!');
  915. }
  916. deferred.done( cb );
  917. if ( typeof opts === 'string' && cache.get( opts ) ) {
  918. runtime = cache.get( opts );
  919. }
  920. // 像filePicker只能独立存在,不能公用。
  921. runtime = runtime || cache.get( null, standalone );
  922. // 需要创建
  923. if ( !runtime ) {
  924. runtime = Runtime.create( opts, opts.runtimeOrder );
  925. runtime.__promise = deferred.promise();
  926. runtime.once( 'ready', deferred.resolve );
  927. runtime.init();
  928. cache.add( runtime );
  929. runtime.__client = 1;
  930. } else {
  931. // 来自cache
  932. Base.$.extend( runtime.options, opts );
  933. runtime.__promise.then( deferred.resolve );
  934. runtime.__client++;
  935. }
  936. standalone && (runtime.__standalone = standalone);
  937. return runtime;
  938. };
  939. this.getRuntime = function() {
  940. return runtime;
  941. };
  942. this.disconnectRuntime = function() {
  943. if ( !runtime ) {
  944. return;
  945. }
  946. runtime.__client--;
  947. if ( runtime.__client <= 0 ) {
  948. cache.remove( runtime );
  949. delete runtime.__promise;
  950. runtime.destroy();
  951. }
  952. runtime = null;
  953. };
  954. this.exec = function() {
  955. if ( !runtime ) {
  956. return;
  957. }
  958. var args = Base.slice( arguments );
  959. component && args.unshift( component );
  960. return runtime.exec.apply( this, args );
  961. };
  962. this.getRuid = function() {
  963. return runtime && runtime.uid;
  964. };
  965. this.destroy = (function( destroy ) {
  966. return function() {
  967. destroy && destroy.apply( this, arguments );
  968. this.trigger('destroy');
  969. this.off();
  970. this.exec('destroy');
  971. this.disconnectRuntime();
  972. };
  973. })( this.destroy );
  974. }
  975. Mediator.installTo( RuntimeClient.prototype );
  976. return RuntimeClient;
  977. });
  978. /**
  979. * @fileOverview 错误信息
  980. */
  981. define('lib/dnd',[
  982. 'base',
  983. 'mediator',
  984. 'runtime/client'
  985. ], function( Base, Mediator, RuntimeClent ) {
  986. var $ = Base.$;
  987. function DragAndDrop( opts ) {
  988. opts = this.options = $.extend({}, DragAndDrop.options, opts );
  989. opts.container = $( opts.container );
  990. if ( !opts.container.length ) {
  991. return;
  992. }
  993. RuntimeClent.call( this, 'DragAndDrop' );
  994. }
  995. DragAndDrop.options = {
  996. accept: null,
  997. disableGlobalDnd: false
  998. };
  999. Base.inherits( RuntimeClent, {
  1000. constructor: DragAndDrop,
  1001. init: function() {
  1002. var me = this;
  1003. me.connectRuntime( me.options, function() {
  1004. me.exec('init');
  1005. me.trigger('ready');
  1006. });
  1007. }
  1008. });
  1009. Mediator.installTo( DragAndDrop.prototype );
  1010. return DragAndDrop;
  1011. });
  1012. /**
  1013. * @fileOverview 组件基类。
  1014. */
  1015. define('widgets/widget',[
  1016. 'base',
  1017. 'uploader'
  1018. ], function( Base, Uploader ) {
  1019. var $ = Base.$,
  1020. _init = Uploader.prototype._init,
  1021. _destroy = Uploader.prototype.destroy,
  1022. IGNORE = {},
  1023. widgetClass = [];
  1024. function isArrayLike( obj ) {
  1025. if ( !obj ) {
  1026. return false;
  1027. }
  1028. var length = obj.length,
  1029. type = $.type( obj );
  1030. if ( obj.nodeType === 1 && length ) {
  1031. return true;
  1032. }
  1033. return type === 'array' || type !== 'function' && type !== 'string' &&
  1034. (length === 0 || typeof length === 'number' && length > 0 &&
  1035. (length - 1) in obj);
  1036. }
  1037. function Widget( uploader ) {
  1038. this.owner = uploader;
  1039. this.options = uploader.options;
  1040. }
  1041. $.extend( Widget.prototype, {
  1042. init: Base.noop,
  1043. // 类Backbone的事件监听声明,监听uploader实例上的事件
  1044. // widget直接无法监听事件,事件只能通过uploader来传递
  1045. invoke: function( apiName, args ) {
  1046. /*
  1047. {
  1048. 'make-thumb': 'makeThumb'
  1049. }
  1050. */
  1051. var map = this.responseMap;
  1052. // 如果无API响应声明则忽略
  1053. if ( !map || !(apiName in map) || !(map[ apiName ] in this) ||
  1054. !$.isFunction( this[ map[ apiName ] ] ) ) {
  1055. return IGNORE;
  1056. }
  1057. return this[ map[ apiName ] ].apply( this, args );
  1058. },
  1059. /**
  1060. * 发送命令。当传入`callback`或者`handler`中返回`promise`时。返回一个当所有`handler`中的promise都完成后完成的新`promise`。
  1061. * @method request
  1062. * @grammar request( command, args ) => * | Promise
  1063. * @grammar request( command, args, callback ) => Promise
  1064. * @for Uploader
  1065. */
  1066. request: function() {
  1067. return this.owner.request.apply( this.owner, arguments );
  1068. }
  1069. });
  1070. // 扩展Uploader.
  1071. $.extend( Uploader.prototype, {
  1072. /**
  1073. * @property {String | Array} [disableWidgets=undefined]
  1074. * @namespace options
  1075. * @for Uploader
  1076. * @description 默认所有 Uploader.register 了的 widget 都会被加载,如果禁用某一部分,请通过此 option 指定黑名单。
  1077. */
  1078. // 覆写_init用来初始化widgets
  1079. _init: function() {
  1080. var me = this,
  1081. widgets = me._widgets = [],
  1082. deactives = me.options.disableWidgets || '';
  1083. $.each( widgetClass, function( _, klass ) {
  1084. (!deactives || !~deactives.indexOf( klass._name )) &&
  1085. widgets.push( new klass( me ) );
  1086. });
  1087. return _init.apply( me, arguments );
  1088. },
  1089. request: function( apiName, args, callback ) {
  1090. var i = 0,
  1091. widgets = this._widgets,
  1092. len = widgets && widgets.length,
  1093. rlts = [],
  1094. dfds = [],
  1095. widget, rlt, promise, key;
  1096. args = isArrayLike( args ) ? args : [ args ];
  1097. for ( ; i < len; i++ ) {
  1098. widget = widgets[ i ];
  1099. rlt = widget.invoke( apiName, args );
  1100. if ( rlt !== IGNORE ) {
  1101. // Deferred对象
  1102. if ( Base.isPromise( rlt ) ) {
  1103. dfds.push( rlt );
  1104. } else {
  1105. rlts.push( rlt );
  1106. }
  1107. }
  1108. }
  1109. // 如果有callback,则用异步方式。
  1110. if ( callback || dfds.length ) {
  1111. promise = Base.when.apply( Base, dfds );
  1112. key = promise.pipe ? 'pipe' : 'then';
  1113. // 很重要不能删除。删除了会死循环。
  1114. // 保证执行顺序。让callback总是在下一个 tick 中执行。
  1115. return promise[ key ](function() {
  1116. var deferred = Base.Deferred(),
  1117. args = arguments;
  1118. if ( args.length === 1 ) {
  1119. args = args[ 0 ];
  1120. }
  1121. setTimeout(function() {
  1122. deferred.resolve( args );
  1123. }, 1 );
  1124. return deferred.promise();
  1125. })[ callback ? key : 'done' ]( callback || Base.noop );
  1126. } else {
  1127. return rlts[ 0 ];
  1128. }
  1129. },
  1130. destroy: function() {
  1131. _destroy.apply( this, arguments );
  1132. this._widgets = null;
  1133. }
  1134. });
  1135. /**
  1136. * 添加组件
  1137. * @grammar Uploader.register(proto);
  1138. * @grammar Uploader.register(map, proto);
  1139. * @param {object} responseMap API 名称与函数实现的映射
  1140. * @param {object} proto 组件原型,构造函数通过 constructor 属性定义
  1141. * @method Uploader.register
  1142. * @for Uploader
  1143. * @example
  1144. * Uploader.register({
  1145. * 'make-thumb': 'makeThumb'
  1146. * }, {
  1147. * init: function( options ) {},
  1148. * makeThumb: function() {}
  1149. * });
  1150. *
  1151. * Uploader.register({
  1152. * 'make-thumb': function() {
  1153. *
  1154. * }
  1155. * });
  1156. */
  1157. Uploader.register = Widget.register = function( responseMap, widgetProto ) {
  1158. var map = { init: 'init', destroy: 'destroy', name: 'anonymous' },
  1159. klass;
  1160. if ( arguments.length === 1 ) {
  1161. widgetProto = responseMap;
  1162. // 自动生成 map 表。
  1163. $.each(widgetProto, function(key) {
  1164. if ( key[0] === '_' || key === 'name' ) {
  1165. key === 'name' && (map.name = widgetProto.name);
  1166. return;
  1167. }
  1168. map[key.replace(/[A-Z]/g, '-$&').toLowerCase()] = key;
  1169. });
  1170. } else {
  1171. map = $.extend( map, responseMap );
  1172. }
  1173. widgetProto.responseMap = map;
  1174. klass = Base.inherits( Widget, widgetProto );
  1175. klass._name = map.name;
  1176. widgetClass.push( klass );
  1177. return klass;
  1178. };
  1179. /**
  1180. * 删除插件,只有在注册时指定了名字的才能被删除。
  1181. * @grammar Uploader.unRegister(name);
  1182. * @param {string} name 组件名字
  1183. * @method Uploader.unRegister
  1184. * @for Uploader
  1185. * @example
  1186. *
  1187. * Uploader.register({
  1188. * name: 'custom',
  1189. *
  1190. * 'make-thumb': function() {
  1191. *
  1192. * }
  1193. * });
  1194. *
  1195. * Uploader.unRegister('custom');
  1196. */
  1197. Uploader.unRegister = Widget.unRegister = function( name ) {
  1198. if ( !name || name === 'anonymous' ) {
  1199. return;
  1200. }
  1201. // 删除指定的插件。
  1202. for ( var i = widgetClass.length; i--; ) {
  1203. if ( widgetClass[i]._name === name ) {
  1204. widgetClass.splice(i, 1)
  1205. }
  1206. }
  1207. };
  1208. return Widget;
  1209. });
  1210. /**
  1211. * @fileOverview DragAndDrop Widget。
  1212. */
  1213. define('widgets/filednd',[
  1214. 'base',
  1215. 'uploader',
  1216. 'lib/dnd',
  1217. 'widgets/widget'
  1218. ], function( Base, Uploader, Dnd ) {
  1219. var $ = Base.$;
  1220. Uploader.options.dnd = '';
  1221. /**
  1222. * @property {Selector} [dnd=undefined] 指定Drag And Drop拖拽的容器,如果不指定,则不启动。
  1223. * @namespace options
  1224. * @for Uploader
  1225. */
  1226. /**
  1227. * @property {Selector} [disableGlobalDnd=false] 是否禁掉整个页面的拖拽功能,如果不禁用,图片拖进来的时候会默认被浏览器打开。
  1228. * @namespace options
  1229. * @for Uploader
  1230. */
  1231. /**
  1232. * @event dndAccept
  1233. * @param {DataTransferItemList} items DataTransferItem
  1234. * @description 阻止此事件可以拒绝某些类型的文件拖入进来。目前只有 chrome 提供这样的 API,且只能通过 mime-type 验证。
  1235. * @for Uploader
  1236. */
  1237. return Uploader.register({
  1238. name: 'dnd',
  1239. init: function( opts ) {
  1240. if ( !opts.dnd ||
  1241. this.request('predict-runtime-type') !== 'html5' ) {
  1242. return;
  1243. }
  1244. var me = this,
  1245. deferred = Base.Deferred(),
  1246. options = $.extend({}, {
  1247. disableGlobalDnd: opts.disableGlobalDnd,
  1248. container: opts.dnd,
  1249. accept: opts.accept
  1250. }),
  1251. dnd;
  1252. this.dnd = dnd = new Dnd( options );
  1253. dnd.once( 'ready', deferred.resolve );
  1254. dnd.on( 'drop', function( files ) {
  1255. me.request( 'add-file', [ files ]);
  1256. });
  1257. // 检测文件是否全部允许添加。
  1258. dnd.on( 'accept', function( items ) {
  1259. return me.owner.trigger( 'dndAccept', items );
  1260. });
  1261. dnd.init();
  1262. return deferred.promise();
  1263. },
  1264. destroy: function() {
  1265. this.dnd && this.dnd.destroy();
  1266. }
  1267. });
  1268. });
  1269. /**
  1270. * @fileOverview 错误信息
  1271. */
  1272. define('lib/filepaste',[
  1273. 'base',
  1274. 'mediator',
  1275. 'runtime/client'
  1276. ], function( Base, Mediator, RuntimeClent ) {
  1277. var $ = Base.$;
  1278. function FilePaste( opts ) {
  1279. opts = this.options = $.extend({}, opts );
  1280. opts.container = $( opts.container || document.body );
  1281. RuntimeClent.call( this, 'FilePaste' );
  1282. }
  1283. Base.inherits( RuntimeClent, {
  1284. constructor: FilePaste,
  1285. init: function() {
  1286. var me = this;
  1287. me.connectRuntime( me.options, function() {
  1288. me.exec('init');
  1289. me.trigger('ready');
  1290. });
  1291. }
  1292. });
  1293. Mediator.installTo( FilePaste.prototype );
  1294. return FilePaste;
  1295. });
  1296. /**
  1297. * @fileOverview 组件基类。
  1298. */
  1299. define('widgets/filepaste',[
  1300. 'base',
  1301. 'uploader',
  1302. 'lib/filepaste',
  1303. 'widgets/widget'
  1304. ], function( Base, Uploader, FilePaste ) {
  1305. var $ = Base.$;
  1306. /**
  1307. * @property {Selector} [paste=undefined] 指定监听paste事件的容器,如果不指定,不启用此功能。此功能为通过粘贴来添加截屏的图片。建议设置为`document.body`.
  1308. * @namespace options
  1309. * @for Uploader
  1310. */
  1311. return Uploader.register({
  1312. name: 'paste',
  1313. init: function( opts ) {
  1314. if ( !opts.paste ||
  1315. this.request('predict-runtime-type') !== 'html5' ) {
  1316. return;
  1317. }
  1318. var me = this,
  1319. deferred = Base.Deferred(),
  1320. options = $.extend({}, {
  1321. container: opts.paste,
  1322. accept: opts.accept
  1323. }),
  1324. paste;
  1325. this.paste = paste = new FilePaste( options );
  1326. paste.once( 'ready', deferred.resolve );
  1327. paste.on( 'paste', function( files ) {
  1328. me.owner.request( 'add-file', [ files ]);
  1329. });
  1330. paste.init();
  1331. return deferred.promise();
  1332. },
  1333. destroy: function() {
  1334. this.paste && this.paste.destroy();
  1335. }
  1336. });
  1337. });
  1338. /**
  1339. * @fileOverview Blob
  1340. */
  1341. define('lib/blob',[
  1342. 'base',
  1343. 'runtime/client'
  1344. ], function( Base, RuntimeClient ) {
  1345. function Blob( ruid, source ) {
  1346. var me = this;
  1347. me.source = source;
  1348. me.ruid = ruid;
  1349. this.size = source.size || 0;
  1350. // 如果没有指定 mimetype, 但是知道文件后缀。
  1351. if ( !source.type && this.ext &&
  1352. ~'jpg,jpeg,png,gif,bmp'.indexOf( this.ext ) ) {
  1353. this.type = 'image/' + (this.ext === 'jpg' ? 'jpeg' : this.ext);
  1354. } else {
  1355. this.type = source.type || 'application/octet-stream';
  1356. }
  1357. RuntimeClient.call( me, 'Blob' );
  1358. this.uid = source.uid || this.uid;
  1359. if ( ruid ) {
  1360. me.connectRuntime( ruid );
  1361. }
  1362. }
  1363. Base.inherits( RuntimeClient, {
  1364. constructor: Blob,
  1365. slice: function( start, end ) {
  1366. return this.exec( 'slice', start, end );
  1367. },
  1368. getSource: function() {
  1369. return this.source;
  1370. }
  1371. });
  1372. return Blob;
  1373. });
  1374. /**
  1375. * 为了统一化Flash的File和HTML5的File而存在。
  1376. * 以至于要调用Flash里面的File,也可以像调用HTML5版本的File一下。
  1377. * @fileOverview File
  1378. */
  1379. define('lib/file',[
  1380. 'base',
  1381. 'lib/blob'
  1382. ], function( Base, Blob ) {
  1383. var uid = 1,
  1384. rExt = /\.([^.]+)$/;
  1385. function File( ruid, file ) {
  1386. var ext;
  1387. this.name = file.name || ('untitled' + uid++);
  1388. ext = rExt.exec( file.name ) ? RegExp.$1.toLowerCase() : '';
  1389. // todo 支持其他类型文件的转换。
  1390. // 如果有 mimetype, 但是文件名里面没有找出后缀规律
  1391. if ( !ext && file.type ) {
  1392. ext = /\/(jpg|jpeg|png|gif|bmp)$/i.exec( file.type ) ?
  1393. RegExp.$1.toLowerCase() : '';
  1394. this.name += '.' + ext;
  1395. }
  1396. this.ext = ext;
  1397. this.lastModifiedDate = file.lastModifiedDate ||
  1398. file.lastModified && new Date(file.lastModified).toLocaleString() ||
  1399. (new Date()).toLocaleString();
  1400. Blob.apply( this, arguments );
  1401. }
  1402. return Base.inherits( Blob, File );
  1403. });
  1404. /**
  1405. * @fileOverview 错误信息
  1406. */
  1407. define('lib/filepicker',[
  1408. 'base',
  1409. 'runtime/client',
  1410. 'lib/file'
  1411. ], function( Base, RuntimeClient, File ) {
  1412. var $ = Base.$;
  1413. function FilePicker( opts ) {
  1414. opts = this.options = $.extend({}, FilePicker.options, opts );
  1415. opts.container = $( opts.id );
  1416. if ( !opts.container.length ) {
  1417. throw new Error('按钮指定错误');
  1418. }
  1419. opts.innerHTML = opts.innerHTML || opts.label ||
  1420. opts.container.html() || '';
  1421. opts.button = $( opts.button || document.createElement('div') );
  1422. opts.button.html( opts.innerHTML );
  1423. opts.container.html( opts.button );
  1424. RuntimeClient.call( this, 'FilePicker', true );
  1425. }
  1426. FilePicker.options = {
  1427. button: null,
  1428. container: null,
  1429. label: null,
  1430. innerHTML: null,
  1431. multiple: true,
  1432. accept: null,
  1433. name: 'file',
  1434. style: 'webuploader-pick' //pick element class attribute, default is "webuploader-pick"
  1435. };
  1436. Base.inherits( RuntimeClient, {
  1437. constructor: FilePicker,
  1438. init: function() {
  1439. var me = this,
  1440. opts = me.options,
  1441. button = opts.button,
  1442. style = opts.style;
  1443. if (style)
  1444. button.addClass('webuploader-pick');
  1445. me.on( 'all', function( type ) {
  1446. var files;
  1447. switch ( type ) {
  1448. case 'mouseenter':
  1449. if (style)
  1450. button.addClass('webuploader-pick-hover');
  1451. break;
  1452. case 'mouseleave':
  1453. if (style)
  1454. button.removeClass('webuploader-pick-hover');
  1455. break;
  1456. case 'change':
  1457. files = me.exec('getFiles');
  1458. me.trigger( 'select', $.map( files, function( file ) {
  1459. file = new File( me.getRuid(), file );
  1460. // 记录来源。
  1461. file._refer = opts.container;
  1462. return file;
  1463. }), opts.container );
  1464. break;
  1465. }
  1466. });
  1467. me.connectRuntime( opts, function() {
  1468. me.refresh();
  1469. me.exec( 'init', opts );
  1470. me.trigger('ready');
  1471. });
  1472. this._resizeHandler = Base.bindFn( this.refresh, this );
  1473. $( window ).on( 'resize', this._resizeHandler );
  1474. },
  1475. refresh: function() {
  1476. var shimContainer = this.getRuntime().getContainer(),
  1477. button = this.options.button,
  1478. /*
  1479. width = button.outerWidth ?
  1480. button.outerWidth() : button.width(),
  1481. height = button.outerHeight ?
  1482. button.outerHeight() : button.height(),
  1483. */
  1484. width = button[0] && button[0].offsetWidth || button.outerWidth() || button.width(),
  1485. height = button[0] && button[0].offsetHeight || button.outerHeight() || button.height(),
  1486. pos = button.offset();
  1487. width && height && shimContainer.css({
  1488. bottom: 'auto',
  1489. right: 'auto',
  1490. width: width + 'px',
  1491. height: height + 'px'
  1492. }).offset( pos );
  1493. },
  1494. enable: function() {
  1495. var btn = this.options.button;
  1496. btn.removeClass('webuploader-pick-disable');
  1497. this.refresh();
  1498. },
  1499. disable: function() {
  1500. var btn = this.options.button;
  1501. this.getRuntime().getContainer().css({
  1502. top: '-99999px'
  1503. });
  1504. btn.addClass('webuploader-pick-disable');
  1505. },
  1506. destroy: function() {
  1507. var btn = this.options.button;
  1508. $( window ).off( 'resize', this._resizeHandler );
  1509. btn.removeClass('webuploader-pick-disable webuploader-pick-hover ' +
  1510. 'webuploader-pick');
  1511. }
  1512. });
  1513. return FilePicker;
  1514. });
  1515. /**
  1516. * @fileOverview 文件选择相关
  1517. */
  1518. define('widgets/filepicker',[
  1519. 'base',
  1520. 'uploader',
  1521. 'lib/filepicker',
  1522. 'widgets/widget'
  1523. ], function( Base, Uploader, FilePicker ) {
  1524. var $ = Base.$;
  1525. $.extend( Uploader.options, {
  1526. /**
  1527. * @property {Selector | Object} [pick=undefined]
  1528. * @namespace options
  1529. * @for Uploader
  1530. * @description 指定选择文件的按钮容器,不指定则不创建按钮。
  1531. *
  1532. * * `id` {Seletor|dom} 指定选择文件的按钮容器,不指定则不创建按钮。**注意** 这里虽然写的是 id, 但是不是只支持 id, 还支持 class, 或者 dom 节点。
  1533. * * `label` {String} 请采用 `innerHTML` 代替
  1534. * * `innerHTML` {String} 指定按钮文字。不指定时优先从指定的容器中看是否自带文字。
  1535. * * `multiple` {Boolean} 是否开起同时选择多个文件能力。
  1536. */
  1537. pick: null,
  1538. /**
  1539. * @property {Array} [accept=null]
  1540. * @namespace options
  1541. * @for Uploader
  1542. * @description 指定接受哪些类型的文件。 由于目前还有ext转mimeType表,所以这里需要分开指定。
  1543. *
  1544. * * `title` {String} 文字描述
  1545. * * `extensions` {String} 允许的文件后缀,不带点,多个用逗号分割。
  1546. * * `mimeTypes` {String} 多个用逗号分割。
  1547. *
  1548. * 如:
  1549. *
  1550. * ```
  1551. * {
  1552. * title: 'Images',
  1553. * extensions: 'gif,jpg,jpeg,bmp,png',
  1554. * mimeTypes: 'image/*'
  1555. * }
  1556. * ```
  1557. */
  1558. accept: null/*{
  1559. title: 'Images',
  1560. extensions: 'gif,jpg,jpeg,bmp,png',
  1561. mimeTypes: 'image/*'
  1562. }*/
  1563. });
  1564. return Uploader.register({
  1565. name: 'picker',
  1566. init: function( opts ) {
  1567. this.pickers = [];
  1568. return opts.pick && this.addBtn( opts.pick );
  1569. },
  1570. refresh: function() {
  1571. $.each( this.pickers, function() {
  1572. this.refresh();
  1573. });
  1574. },
  1575. /**
  1576. * @method addButton
  1577. * @for Uploader
  1578. * @grammar addButton( pick ) => Promise
  1579. * @description
  1580. * 添加文件选择按钮,如果一个按钮不够,需要调用此方法来添加。参数跟[options.pick](#WebUploader:Uploader:options)一致。
  1581. * @example
  1582. * uploader.addButton({
  1583. * id: '#btnContainer',
  1584. * innerHTML: '选择文件'
  1585. * });
  1586. */
  1587. addBtn: function( pick ) {
  1588. var me = this,
  1589. opts = me.options,
  1590. accept = opts.accept,
  1591. promises = [];
  1592. if ( !pick ) {
  1593. return;
  1594. }
  1595. $.isPlainObject( pick ) || (pick = {
  1596. id: pick
  1597. });
  1598. $( pick.id ).each(function() {
  1599. var options, picker, deferred;
  1600. deferred = Base.Deferred();
  1601. options = $.extend({}, pick, {
  1602. accept: $.isPlainObject( accept ) ? [ accept ] : accept,
  1603. swf: opts.swf,
  1604. runtimeOrder: opts.runtimeOrder,
  1605. id: this
  1606. });
  1607. picker = new FilePicker( options );
  1608. picker.once( 'ready', deferred.resolve );
  1609. picker.on( 'select', function( files ) {
  1610. me.owner.request( 'add-file', [ files ]);
  1611. });
  1612. picker.on('dialogopen', function() {
  1613. me.owner.trigger('dialogOpen', picker.button);
  1614. });
  1615. picker.init();
  1616. me.pickers.push( picker );
  1617. promises.push( deferred.promise() );
  1618. });
  1619. return Base.when.apply( Base, promises );
  1620. },
  1621. disable: function() {
  1622. $.each( this.pickers, function() {
  1623. this.disable();
  1624. });
  1625. },
  1626. enable: function() {
  1627. $.each( this.pickers, function() {
  1628. this.enable();
  1629. });
  1630. },
  1631. destroy: function() {
  1632. $.each( this.pickers, function() {
  1633. this.destroy();
  1634. });
  1635. this.pickers = null;
  1636. }
  1637. });
  1638. });
  1639. /**
  1640. * @fileOverview Image
  1641. */
  1642. define('lib/image',[
  1643. 'base',
  1644. 'runtime/client',
  1645. 'lib/blob'
  1646. ], function( Base, RuntimeClient, Blob ) {
  1647. var $ = Base.$;
  1648. // 构造器。
  1649. function Image( opts ) {
  1650. this.options = $.extend({}, Image.options, opts );
  1651. RuntimeClient.call( this, 'Image' );
  1652. this.on( 'load', function() {
  1653. this._info = this.exec('info');
  1654. this._meta = this.exec('meta');
  1655. });
  1656. }
  1657. // 默认选项。
  1658. Image.options = {
  1659. // 默认的图片处理质量
  1660. quality: 90,
  1661. // 是否裁剪
  1662. crop: false,
  1663. // 是否保留头部信息
  1664. preserveHeaders: false,
  1665. // 是否允许放大。
  1666. allowMagnify: false
  1667. };
  1668. // 继承RuntimeClient.
  1669. Base.inherits( RuntimeClient, {
  1670. constructor: Image,
  1671. info: function( val ) {
  1672. // setter
  1673. if ( val ) {
  1674. this._info = val;
  1675. return this;
  1676. }
  1677. // getter
  1678. return this._info;
  1679. },
  1680. meta: function( val ) {
  1681. // setter
  1682. if ( val ) {
  1683. this._meta = val;
  1684. return this;
  1685. }
  1686. // getter
  1687. return this._meta;
  1688. },
  1689. loadFromBlob: function( blob ) {
  1690. var me = this,
  1691. ruid = blob.getRuid();
  1692. this.connectRuntime( ruid, function() {
  1693. me.exec( 'init', me.options );
  1694. me.exec( 'loadFromBlob', blob );
  1695. });
  1696. },
  1697. resize: function() {
  1698. var args = Base.slice( arguments );
  1699. return this.exec.apply( this, [ 'resize' ].concat( args ) );
  1700. },
  1701. crop: function() {
  1702. var args = Base.slice( arguments );
  1703. return this.exec.apply( this, [ 'crop' ].concat( args ) );
  1704. },
  1705. getAsDataUrl: function( type ) {
  1706. return this.exec( 'getAsDataUrl', type );
  1707. },
  1708. getAsBlob: function( type ) {
  1709. var blob = this.exec( 'getAsBlob', type );
  1710. return new Blob( this.getRuid(), blob );
  1711. }
  1712. });
  1713. return Image;
  1714. });
  1715. /**
  1716. * @fileOverview 图片操作, 负责预览图片和上传前压缩图片
  1717. */
  1718. define('widgets/image',[
  1719. 'base',
  1720. 'uploader',
  1721. 'lib/image',
  1722. 'widgets/widget'
  1723. ], function( Base, Uploader, Image ) {
  1724. var $ = Base.$,
  1725. throttle;
  1726. // 根据要处理的文件大小来节流,一次不能处理太多,会卡。
  1727. throttle = (function( max ) {
  1728. var occupied = 0,
  1729. waiting = [],
  1730. tick = function() {
  1731. var item;
  1732. while ( waiting.length && occupied < max ) {
  1733. item = waiting.shift();
  1734. occupied += item[ 0 ];
  1735. item[ 1 ]();
  1736. }
  1737. };
  1738. return function( emiter, size, cb ) {
  1739. waiting.push([ size, cb ]);
  1740. emiter.once( 'destroy', function() {
  1741. occupied -= size;
  1742. setTimeout( tick, 1 );
  1743. });
  1744. setTimeout( tick, 1 );
  1745. };
  1746. })( 5 * 1024 * 1024 );
  1747. $.extend( Uploader.options, {
  1748. /**
  1749. * @property {Object} [thumb]
  1750. * @namespace options
  1751. * @for Uploader
  1752. * @description 配置生成缩略图的选项。
  1753. *
  1754. * 默认为:
  1755. *
  1756. * ```javascript
  1757. * {
  1758. * width: 110,
  1759. * height: 110,
  1760. *
  1761. * // 图片质量,只有type为`image/jpeg`的时候才有效。
  1762. * quality: 70,
  1763. *
  1764. * // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
  1765. * allowMagnify: true,
  1766. *
  1767. * // 是否允许裁剪。
  1768. * crop: true,
  1769. *
  1770. * // 为空的话则保留原有图片格式。
  1771. * // 否则强制转换成指定的类型。
  1772. * type: 'image/jpeg'
  1773. * }
  1774. * ```
  1775. */
  1776. thumb: {
  1777. width: 110,
  1778. height: 110,
  1779. quality: 70,
  1780. allowMagnify: true,
  1781. crop: true,
  1782. preserveHeaders: false,
  1783. // 为空的话则保留原有图片格式。
  1784. // 否则强制转换成指定的类型。
  1785. // IE 8下面 base64 大小不能超过 32K 否则预览失败,而非 jpeg 编码的图片很可
  1786. // 能会超过 32k, 所以这里设置成预览的时候都是 image/jpeg
  1787. type: 'image/jpeg'
  1788. },
  1789. /**
  1790. * @property {Object} [compress]
  1791. * @namespace options
  1792. * @for Uploader
  1793. * @description 配置压缩的图片的选项。如果此选项为`false`, 则图片在上传前不进行压缩。
  1794. *
  1795. * 默认为:
  1796. *
  1797. * ```javascript
  1798. * {
  1799. * width: 1600,
  1800. * height: 1600,
  1801. *
  1802. * // 图片质量,只有type为`image/jpeg`的时候才有效。
  1803. * quality: 90,
  1804. *
  1805. * // 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
  1806. * allowMagnify: false,
  1807. *
  1808. * // 是否允许裁剪。
  1809. * crop: false,
  1810. *
  1811. * // 是否保留头部meta信息。
  1812. * preserveHeaders: true,
  1813. *
  1814. * // 如果发现压缩后文件大小比原来还大,则使用原来图片
  1815. * // 此属性可能会影响图片自动纠正功能
  1816. * noCompressIfLarger: false,
  1817. *
  1818. * // 单位字节,如果图片大小小于此值,不会采用压缩。
  1819. * compressSize: 0
  1820. * }
  1821. * ```
  1822. */
  1823. compress: {
  1824. width: 1600,
  1825. height: 1600,
  1826. quality: 90,
  1827. allowMagnify: false,
  1828. crop: false,
  1829. preserveHeaders: true
  1830. }
  1831. });
  1832. return Uploader.register({
  1833. name: 'image',
  1834. /**
  1835. * 生成缩略图,此过程为异步,所以需要传入`callback`。
  1836. * 通常情况在图片加入队里后调用此方法来生成预览图以增强交互效果。
  1837. *
  1838. * 当 width 或者 height 的值介于 0 - 1 时,被当成百分比使用。
  1839. *
  1840. * `callback`中可以接收到两个参数。
  1841. * * 第一个为error,如果生成缩略图有错误,此error将为真。
  1842. * * 第二个为ret, 缩略图的Data URL值。
  1843. *
  1844. * **注意**
  1845. * Date URL在IE6/7中不支持,所以不用调用此方法了,直接显示一张暂不支持预览图片好了。
  1846. * 也可以借助服务端,将 base64 数据传给服务端,生成一个临时文件供预览。
  1847. *
  1848. * @method makeThumb
  1849. * @grammar makeThumb( file, callback ) => undefined
  1850. * @grammar makeThumb( file, callback, width, height ) => undefined
  1851. * @for Uploader
  1852. * @example
  1853. *
  1854. * uploader.on( 'fileQueued', function( file ) {
  1855. * var $li = ...;
  1856. *
  1857. * uploader.makeThumb( file, function( error, ret ) {
  1858. * if ( error ) {
  1859. * $li.text('预览错误');
  1860. * } else {
  1861. * $li.append('<img alt="" src="' + ret + '" />');
  1862. * }
  1863. * });
  1864. *
  1865. * });
  1866. */
  1867. makeThumb: function( file, cb, width, height ) {
  1868. var opts, image;
  1869. file = this.request( 'get-file', file );
  1870. // 只预览图片格式。
  1871. if ( !file.type.match( /^image/ ) ) {
  1872. cb( true );
  1873. return;
  1874. }
  1875. opts = $.extend({}, this.options.thumb );
  1876. // 如果传入的是object.
  1877. if ( $.isPlainObject( width ) ) {
  1878. opts = $.extend( opts, width );
  1879. width = null;
  1880. }
  1881. width = width || opts.width;
  1882. height = height || opts.height;
  1883. image = new Image( opts );
  1884. image.once( 'load', function() {
  1885. file._info = file._info || image.info();
  1886. file._meta = file._meta || image.meta();
  1887. // 如果 width 的值介于 0 - 1
  1888. // 说明设置的是百分比。
  1889. if ( width <= 1 && width > 0 ) {
  1890. width = file._info.width * width;
  1891. }
  1892. // 同样的规则应用于 height
  1893. if ( height <= 1 && height > 0 ) {
  1894. height = file._info.height * height;
  1895. }
  1896. image.resize( width, height );
  1897. });
  1898. // 当 resize 完后
  1899. image.once( 'complete', function() {
  1900. cb( false, image.getAsDataUrl( opts.type ) );
  1901. image.destroy();
  1902. });
  1903. image.once( 'error', function( reason ) {
  1904. cb( reason || true );
  1905. image.destroy();
  1906. });
  1907. throttle( image, file.source.size, function() {
  1908. file._info && image.info( file._info );
  1909. file._meta && image.meta( file._meta );
  1910. image.loadFromBlob( file.source );
  1911. });
  1912. },
  1913. beforeSendFile: function( file ) {
  1914. var opts = this.options.compress || this.options.resize,
  1915. compressSize = opts && opts.compressSize || 0,
  1916. noCompressIfLarger = opts && opts.noCompressIfLarger || false,
  1917. image, deferred;
  1918. file = this.request( 'get-file', file );
  1919. // 只压缩 jpeg 图片格式。
  1920. // gif 可能会丢失针
  1921. // bmp png 基本上尺寸都不大,且压缩比比较小。
  1922. if ( !opts || !~'image/jpeg,image/jpg'.indexOf( file.type ) ||
  1923. file.size < compressSize ||
  1924. file._compressed ) {
  1925. return;
  1926. }
  1927. opts = $.extend({}, opts );
  1928. deferred = Base.Deferred();
  1929. image = new Image( opts );
  1930. deferred.always(function() {
  1931. image.destroy();
  1932. image = null;
  1933. });
  1934. image.once( 'error', deferred.reject );
  1935. image.once( 'load', function() {
  1936. var width = opts.width,
  1937. height = opts.height;
  1938. file._info = file._info || image.info();
  1939. file._meta = file._meta || image.meta();
  1940. // 如果 width 的值介于 0 - 1
  1941. // 说明设置的是百分比。
  1942. if ( width <= 1 && width > 0 ) {
  1943. width = file._info.width * width;
  1944. }
  1945. // 同样的规则应用于 height
  1946. if ( height <= 1 && height > 0 ) {
  1947. height = file._info.height * height;
  1948. }
  1949. image.resize( width, height );
  1950. });
  1951. image.once( 'complete', function() {
  1952. var blob, size;
  1953. // 移动端 UC / qq 浏览器的无图模式下
  1954. // ctx.getImageData 处理大图的时候会报 Exception
  1955. // INDEX_SIZE_ERR: DOM Exception 1
  1956. try {
  1957. blob = image.getAsBlob( opts.type );
  1958. size = file.size;
  1959. // 如果压缩后,比原来还大则不用压缩后的。
  1960. if ( !noCompressIfLarger || blob.size < size ) {
  1961. // file.source.destroy && file.source.destroy();
  1962. file.source = blob;
  1963. file.size = blob.size;
  1964. file.trigger( 'resize', blob.size, size );
  1965. }
  1966. // 标记,避免重复压缩。
  1967. file._compressed = true;
  1968. deferred.resolve();
  1969. } catch ( e ) {
  1970. // 出错了直接继续,让其上传原始图片
  1971. deferred.resolve();
  1972. }
  1973. });
  1974. file._info && image.info( file._info );
  1975. file._meta && image.meta( file._meta );
  1976. image.loadFromBlob( file.source );
  1977. return deferred.promise();
  1978. }
  1979. });
  1980. });
  1981. /**
  1982. * @fileOverview 文件属性封装
  1983. */
  1984. define('file',[
  1985. 'base',
  1986. 'mediator'
  1987. ], function( Base, Mediator ) {
  1988. var $ = Base.$,
  1989. idPrefix = 'WU_FILE_',
  1990. idSuffix = 0,
  1991. rExt = /\.([^.]+)$/,
  1992. statusMap = {};
  1993. function gid() {
  1994. return idPrefix + idSuffix++;
  1995. }
  1996. /**
  1997. * 文件类
  1998. * @class File
  1999. * @constructor 构造函数
  2000. * @grammar new File( source ) => File
  2001. * @param {Lib.File} source [lib.File](#Lib.File)实例, 此source对象是带有Runtime信息的。
  2002. */
  2003. function WUFile( source ) {
  2004. /**
  2005. * 文件名,包括扩展名(后缀)
  2006. * @property name
  2007. * @type {string}
  2008. */
  2009. this.name = source.name || 'Untitled';
  2010. /**
  2011. * 文件体积(字节)
  2012. * @property size
  2013. * @type {uint}
  2014. * @default 0
  2015. */
  2016. this.size = source.size || 0;
  2017. /**
  2018. * 文件MIMETYPE类型,与文件类型的对应关系请参考[http://t.cn/z8ZnFny](http://t.cn/z8ZnFny)
  2019. * @property type
  2020. * @type {string}
  2021. * @default 'application/octet-stream'
  2022. */
  2023. this.type = source.type || 'application/octet-stream';
  2024. /**
  2025. * 文件最后修改日期
  2026. * @property lastModifiedDate
  2027. * @type {int}
  2028. * @default 当前时间戳
  2029. */
  2030. this.lastModifiedDate = source.lastModifiedDate || (new Date() * 1);
  2031. /**
  2032. * 文件ID,每个对象具有唯一ID,与文件名无关
  2033. * @property id
  2034. * @type {string}
  2035. */
  2036. this.id = gid();
  2037. /**
  2038. * 文件扩展名,通过文件名获取,例如test.png的扩展名为png
  2039. * @property ext
  2040. * @type {string}
  2041. */
  2042. this.ext = rExt.exec( this.name ) ? RegExp.$1 : '';
  2043. /**
  2044. * 状态文字说明。在不同的status语境下有不同的用途。
  2045. * @property statusText
  2046. * @type {string}
  2047. */
  2048. this.statusText = '';
  2049. // 存储文件状态,防止通过属性直接修改
  2050. statusMap[ this.id ] = WUFile.Status.INITED;
  2051. this.source = source;
  2052. this.loaded = 0;
  2053. this.on( 'error', function( msg ) {
  2054. this.setStatus( WUFile.Status.ERROR, msg );
  2055. });
  2056. }
  2057. $.extend( WUFile.prototype, {
  2058. /**
  2059. * 设置状态,状态变化时会触发`change`事件。
  2060. * @method setStatus
  2061. * @grammar setStatus( status[, statusText] );
  2062. * @param {File.Status|String} status [文件状态值](#WebUploader:File:File.Status)
  2063. * @param {String} [statusText=''] 状态说明,常在error时使用,用http, abort,server等来标记是由于什么原因导致文件错误。
  2064. */
  2065. setStatus: function( status, text ) {
  2066. var prevStatus = statusMap[ this.id ];
  2067. typeof text !== 'undefined' && (this.statusText = text);
  2068. if ( status !== prevStatus ) {
  2069. statusMap[ this.id ] = status;
  2070. /**
  2071. * 文件状态变化
  2072. * @event statuschange
  2073. */
  2074. this.trigger( 'statuschange', status, prevStatus );
  2075. }
  2076. },
  2077. /**
  2078. * 获取文件状态
  2079. * @return {File.Status}
  2080. * @example
  2081. 文件状态具体包括以下几种类型:
  2082. {
  2083. // 初始化
  2084. INITED: 0,
  2085. // 已入队列
  2086. QUEUED: 1,
  2087. // 正在上传
  2088. PROGRESS: 2,
  2089. // 上传出错
  2090. ERROR: 3,
  2091. // 上传成功
  2092. COMPLETE: 4,
  2093. // 上传取消
  2094. CANCELLED: 5
  2095. }
  2096. */
  2097. getStatus: function() {
  2098. return statusMap[ this.id ];
  2099. },
  2100. /**
  2101. * 获取文件原始信息。
  2102. * @return {*}
  2103. */
  2104. getSource: function() {
  2105. return this.source;
  2106. },
  2107. destroy: function() {
  2108. this.off();
  2109. delete statusMap[ this.id ];
  2110. }
  2111. });
  2112. Mediator.installTo( WUFile.prototype );
  2113. /**
  2114. * 文件状态值,具体包括以下几种类型:
  2115. * * `inited` 初始状态
  2116. * * `queued` 已经进入队列, 等待上传
  2117. * * `progress` 上传中
  2118. * * `complete` 上传完成。
  2119. * * `error` 上传出错,可重试
  2120. * * `interrupt` 上传中断,可续传。
  2121. * * `invalid` 文件不合格,不能重试上传。会自动从队列中移除。
  2122. * * `cancelled` 文件被移除。
  2123. * @property {Object} Status
  2124. * @namespace File
  2125. * @class File
  2126. * @static
  2127. */
  2128. WUFile.Status = {
  2129. INITED: 'inited', // 初始状态
  2130. QUEUED: 'queued', // 已经进入队列, 等待上传
  2131. PROGRESS: 'progress', // 上传中
  2132. ERROR: 'error', // 上传出错,可重试
  2133. COMPLETE: 'complete', // 上传完成。
  2134. CANCELLED: 'cancelled', // 上传取消。
  2135. INTERRUPT: 'interrupt', // 上传中断,可续传。
  2136. INVALID: 'invalid' // 文件不合格,不能重试上传。
  2137. };
  2138. return WUFile;
  2139. });
  2140. /**
  2141. * @fileOverview 文件队列
  2142. */
  2143. define('queue',[
  2144. 'base',
  2145. 'mediator',
  2146. 'file'
  2147. ], function( Base, Mediator, WUFile ) {
  2148. var $ = Base.$,
  2149. STATUS = WUFile.Status;
  2150. /**
  2151. * 文件队列, 用来存储各个状态中的文件。
  2152. * @class Queue
  2153. * @extends Mediator
  2154. */
  2155. function Queue() {
  2156. /**
  2157. * 统计文件数。
  2158. * * `numOfQueue` 队列中的文件数。
  2159. * * `numOfSuccess` 上传成功的文件数
  2160. * * `numOfCancel` 被取消的文件数
  2161. * * `numOfProgress` 正在上传中的文件数
  2162. * * `numOfUploadFailed` 上传错误的文件数。
  2163. * * `numOfInvalid` 无效的文件数。
  2164. * * `numOfDeleted` 被移除的文件数。
  2165. * * `numOfInterrupt` 被中断的文件数。
  2166. * @property {Object} stats
  2167. */
  2168. this.stats = {
  2169. numOfQueue: 0,
  2170. numOfSuccess: 0,
  2171. numOfCancel: 0,
  2172. numOfProgress: 0,
  2173. numOfUploadFailed: 0,
  2174. numOfInvalid: 0,
  2175. numOfDeleted: 0,
  2176. numOfInterrupt: 0
  2177. };
  2178. // 上传队列,仅包括等待上传的文件
  2179. this._queue = [];
  2180. // 存储所有文件
  2181. this._map = {};
  2182. }
  2183. $.extend( Queue.prototype, {
  2184. /**
  2185. * 将新文件加入对队列尾部
  2186. *
  2187. * @method append
  2188. * @param {File} file 文件对象
  2189. */
  2190. append: function( file ) {
  2191. this._queue.push( file );
  2192. this._fileAdded( file );
  2193. return this;
  2194. },
  2195. /**
  2196. * 将新文件加入对队列头部
  2197. *
  2198. * @method prepend
  2199. * @param {File} file 文件对象
  2200. */
  2201. prepend: function( file ) {
  2202. this._queue.unshift( file );
  2203. this._fileAdded( file );
  2204. return this;
  2205. },
  2206. /**
  2207. * 获取文件对象
  2208. *
  2209. * @method getFile
  2210. * @param {String} fileId 文件ID
  2211. * @return {File}
  2212. */
  2213. getFile: function( fileId ) {
  2214. if ( typeof fileId !== 'string' ) {
  2215. return fileId;
  2216. }
  2217. return this._map[ fileId ];
  2218. },
  2219. /**
  2220. * 从队列中取出一个指定状态的文件。
  2221. * @grammar fetch( status ) => File
  2222. * @method fetch
  2223. * @param {String} status [文件状态值](#WebUploader:File:File.Status)
  2224. * @return {File} [File](#WebUploader:File)
  2225. */
  2226. fetch: function( status ) {
  2227. var len = this._queue.length,
  2228. i, file;
  2229. status = status || STATUS.QUEUED;
  2230. for ( i = 0; i < len; i++ ) {
  2231. file = this._queue[ i ];
  2232. if ( status === file.getStatus() ) {
  2233. return file;
  2234. }
  2235. }
  2236. return null;
  2237. },
  2238. /**
  2239. * 对队列进行排序,能够控制文件上传顺序。
  2240. * @grammar sort( fn ) => undefined
  2241. * @method sort
  2242. * @param {Function} fn 排序方法
  2243. */
  2244. sort: function( fn ) {
  2245. if ( typeof fn === 'function' ) {
  2246. this._queue.sort( fn );
  2247. }
  2248. },
  2249. /**
  2250. * 获取指定类型的文件列表, 列表中每一个成员为[File](#WebUploader:File)对象。
  2251. * @grammar getFiles( [status1[, status2 ...]] ) => Array
  2252. * @method getFiles
  2253. * @param {String} [status] [文件状态值](#WebUploader:File:File.Status)
  2254. */
  2255. getFiles: function() {
  2256. var sts = [].slice.call( arguments, 0 ),
  2257. ret = [],
  2258. i = 0,
  2259. len = this._queue.length,
  2260. file;
  2261. for ( ; i < len; i++ ) {
  2262. file = this._queue[ i ];
  2263. if ( sts.length && !~$.inArray( file.getStatus(), sts ) ) {
  2264. continue;
  2265. }
  2266. ret.push( file );
  2267. }
  2268. return ret;
  2269. },
  2270. /**
  2271. * 在队列中删除文件。
  2272. * @grammar removeFile( file ) => Array
  2273. * @method removeFile
  2274. * @param {File} 文件对象。
  2275. */
  2276. removeFile: function( file ) {
  2277. var me = this,
  2278. existing = this._map[ file.id ];
  2279. if ( existing ) {
  2280. delete this._map[ file.id ];
  2281. this._delFile(file);
  2282. file.destroy();
  2283. this.stats.numOfDeleted++;
  2284. }
  2285. },
  2286. _fileAdded: function( file ) {
  2287. var me = this,
  2288. existing = this._map[ file.id ];
  2289. if ( !existing ) {
  2290. this._map[ file.id ] = file;
  2291. file.on( 'statuschange', function( cur, pre ) {
  2292. me._onFileStatusChange( cur, pre );
  2293. });
  2294. }
  2295. },
  2296. _delFile : function(file){
  2297. for(var i = this._queue.length - 1 ; i >= 0 ; i-- ){
  2298. if(this._queue[i] == file){
  2299. this._queue.splice(i,1);
  2300. break;
  2301. }
  2302. }
  2303. },
  2304. _onFileStatusChange: function( curStatus, preStatus ) {
  2305. var stats = this.stats;
  2306. switch ( preStatus ) {
  2307. case STATUS.PROGRESS:
  2308. stats.numOfProgress--;
  2309. break;
  2310. case STATUS.QUEUED:
  2311. stats.numOfQueue --;
  2312. break;
  2313. case STATUS.ERROR:
  2314. stats.numOfUploadFailed--;
  2315. break;
  2316. case STATUS.INVALID:
  2317. stats.numOfInvalid--;
  2318. break;
  2319. case STATUS.INTERRUPT:
  2320. stats.numOfInterrupt--;
  2321. break;
  2322. }
  2323. switch ( curStatus ) {
  2324. case STATUS.QUEUED:
  2325. stats.numOfQueue++;
  2326. break;
  2327. case STATUS.PROGRESS:
  2328. stats.numOfProgress++;
  2329. break;
  2330. case STATUS.ERROR:
  2331. stats.numOfUploadFailed++;
  2332. break;
  2333. case STATUS.COMPLETE:
  2334. stats.numOfSuccess++;
  2335. break;
  2336. case STATUS.CANCELLED:
  2337. stats.numOfCancel++;
  2338. break;
  2339. case STATUS.INVALID:
  2340. stats.numOfInvalid++;
  2341. break;
  2342. case STATUS.INTERRUPT:
  2343. stats.numOfInterrupt++;
  2344. break;
  2345. }
  2346. }
  2347. });
  2348. Mediator.installTo( Queue.prototype );
  2349. return Queue;
  2350. });
  2351. /**
  2352. * @fileOverview 队列
  2353. */
  2354. define('widgets/queue',[
  2355. 'base',
  2356. 'uploader',
  2357. 'queue',
  2358. 'file',
  2359. 'lib/file',
  2360. 'runtime/client',
  2361. 'widgets/widget'
  2362. ], function( Base, Uploader, Queue, WUFile, File, RuntimeClient ) {
  2363. var $ = Base.$,
  2364. rExt = /\.\w+$/,
  2365. Status = WUFile.Status;
  2366. return Uploader.register({
  2367. name: 'queue',
  2368. init: function( opts ) {
  2369. var me = this,
  2370. deferred, len, i, item, arr, accept, runtime;
  2371. if ( $.isPlainObject( opts.accept ) ) {
  2372. opts.accept = [ opts.accept ];
  2373. }
  2374. // accept中的中生成匹配正则。
  2375. if ( opts.accept ) {
  2376. arr = [];
  2377. for ( i = 0, len = opts.accept.length; i < len; i++ ) {
  2378. item = opts.accept[ i ].extensions;
  2379. item && arr.push( item );
  2380. }
  2381. if ( arr.length ) {
  2382. accept = '\\.' + arr.join(',')
  2383. .replace( /,/g, '$|\\.' )
  2384. .replace( /\*/g, '.*' ) + '$';
  2385. }
  2386. me.accept = new RegExp( accept, 'i' );
  2387. }
  2388. me.queue = new Queue();
  2389. me.stats = me.queue.stats;
  2390. // 如果当前不是html5运行时,那就算了。
  2391. // 不执行后续操作
  2392. if ( this.request('predict-runtime-type') !== 'html5' ) {
  2393. return;
  2394. }
  2395. // 创建一个 html5 运行时的 placeholder
  2396. // 以至于外部添加原生 File 对象的时候能正确包裹一下供 webuploader 使用。
  2397. deferred = Base.Deferred();
  2398. this.placeholder = runtime = new RuntimeClient('Placeholder');
  2399. runtime.connectRuntime({
  2400. runtimeOrder: 'html5'
  2401. }, function() {
  2402. me._ruid = runtime.getRuid();
  2403. deferred.resolve();
  2404. });
  2405. return deferred.promise();
  2406. },
  2407. // 为了支持外部直接添加一个原生File对象。
  2408. _wrapFile: function( file ) {
  2409. if ( !(file instanceof WUFile) ) {
  2410. if ( !(file instanceof File) ) {
  2411. if ( !this._ruid ) {
  2412. throw new Error('Can\'t add external files.');
  2413. }
  2414. file = new File( this._ruid, file );
  2415. }
  2416. file = new WUFile( file );
  2417. }
  2418. return file;
  2419. },
  2420. // 判断文件是否可以被加入队列
  2421. acceptFile: function( file ) {
  2422. var invalid = !file || !file.size || this.accept &&
  2423. // 如果名字中有后缀,才做后缀白名单处理。
  2424. rExt.exec( file.name ) && !this.accept.test( file.name );
  2425. return !invalid;
  2426. },
  2427. /**
  2428. * @event beforeFileQueued
  2429. * @param {File} file File对象
  2430. * @description 当文件被加入队列之前触发。如果此事件handler的返回值为`false`,则此文件不会被添加进入队列。
  2431. * @for Uploader
  2432. */
  2433. /**
  2434. * @event fileQueued
  2435. * @param {File} file File对象
  2436. * @description 当文件被加入队列以后触发。
  2437. * @for Uploader
  2438. */
  2439. _addFile: function( file ) {
  2440. var me = this;
  2441. file = me._wrapFile( file );
  2442. // 不过类型判断允许不允许,先派送 `beforeFileQueued`
  2443. if ( !me.owner.trigger( 'beforeFileQueued', file ) ) {
  2444. return;
  2445. }
  2446. // 类型不匹配,则派送错误事件,并返回。
  2447. if ( !me.acceptFile( file ) ) {
  2448. me.owner.trigger( 'error', 'Q_TYPE_DENIED', file );
  2449. return;
  2450. }
  2451. me.queue.append( file );
  2452. me.owner.trigger( 'fileQueued', file );
  2453. return file;
  2454. },
  2455. getFile: function( fileId ) {
  2456. return this.queue.getFile( fileId );
  2457. },
  2458. /**
  2459. * @event filesQueued
  2460. * @param {File} files 数组,内容为原始File(lib/File)对象。
  2461. * @description 当一批文件添加进队列以后触发。
  2462. * @for Uploader
  2463. */
  2464. /**
  2465. * @property {Boolean} [auto=false]
  2466. * @namespace options
  2467. * @for Uploader
  2468. * @description 设置为 true 后,不需要手动调用上传,有文件选择即开始上传。
  2469. *
  2470. */
  2471. /**
  2472. * @method addFiles
  2473. * @grammar addFiles( file ) => undefined
  2474. * @grammar addFiles( [file1, file2 ...] ) => undefined
  2475. * @param {Array of File or File} [files] Files 对象 数组
  2476. * @description 添加文件到队列
  2477. * @for Uploader
  2478. */
  2479. addFile: function( files ) {
  2480. var me = this;
  2481. if ( !files.length ) {
  2482. files = [ files ];
  2483. }
  2484. files = $.map( files, function( file ) {
  2485. return me._addFile( file );
  2486. });
  2487. if ( files.length ) {
  2488. me.owner.trigger( 'filesQueued', files );
  2489. if ( me.options.auto ) {
  2490. setTimeout(function() {
  2491. me.request('start-upload');
  2492. }, 20 );
  2493. }
  2494. }
  2495. },
  2496. getStats: function() {
  2497. return this.stats;
  2498. },
  2499. /**
  2500. * @event fileDequeued
  2501. * @param {File} file File对象
  2502. * @description 当文件被移除队列后触发。
  2503. * @for Uploader
  2504. */
  2505. /**
  2506. * @method removeFile
  2507. * @grammar removeFile( file ) => undefined
  2508. * @grammar removeFile( id ) => undefined
  2509. * @grammar removeFile( file, true ) => undefined
  2510. * @grammar removeFile( id, true ) => undefined
  2511. * @param {File|id} file File对象或这File对象的id
  2512. * @description 移除某一文件, 默认只会标记文件状态为已取消,如果第二个参数为 `true` 则会从 queue 中移除。
  2513. * @for Uploader
  2514. * @example
  2515. *
  2516. * $li.on('click', '.remove-this', function() {
  2517. * uploader.removeFile( file );
  2518. * })
  2519. */
  2520. removeFile: function( file, remove ) {
  2521. var me = this;
  2522. file = file.id ? file : me.queue.getFile( file );
  2523. this.request( 'cancel-file', file );
  2524. if ( remove ) {
  2525. this.queue.removeFile( file );
  2526. }
  2527. },
  2528. /**
  2529. * @method getFiles
  2530. * @grammar getFiles() => Array
  2531. * @grammar getFiles( status1, status2, status... ) => Array
  2532. * @description 返回指定状态的文件集合,不传参数将返回所有状态的文件。
  2533. * @for Uploader
  2534. * @example
  2535. * console.log( uploader.getFiles() ); // => all files
  2536. * console.log( uploader.getFiles('error') ) // => all error files.
  2537. */
  2538. getFiles: function() {
  2539. return this.queue.getFiles.apply( this.queue, arguments );
  2540. },
  2541. fetchFile: function() {
  2542. return this.queue.fetch.apply( this.queue, arguments );
  2543. },
  2544. /**
  2545. * @method retry
  2546. * @grammar retry() => undefined
  2547. * @grammar retry( file ) => undefined
  2548. * @description 重试上传,重试指定文件,或者从出错的文件开始重新上传。
  2549. * @for Uploader
  2550. * @example
  2551. * function retry() {
  2552. * uploader.retry();
  2553. * }
  2554. */
  2555. retry: function( file, noForceStart ) {
  2556. var me = this,
  2557. files, i, len;
  2558. if ( file ) {
  2559. file = file.id ? file : me.queue.getFile( file );
  2560. file.setStatus( Status.QUEUED );
  2561. noForceStart || me.request('start-upload');
  2562. return;
  2563. }
  2564. files = me.queue.getFiles( Status.ERROR );
  2565. i = 0;
  2566. len = files.length;
  2567. for ( ; i < len; i++ ) {
  2568. file = files[ i ];
  2569. file.setStatus( Status.QUEUED );
  2570. }
  2571. me.request('start-upload');
  2572. },
  2573. /**
  2574. * @method sort
  2575. * @grammar sort( fn ) => undefined
  2576. * @description 排序队列中的文件,在上传之前调整可以控制上传顺序。
  2577. * @for Uploader
  2578. */
  2579. sortFiles: function() {
  2580. return this.queue.sort.apply( this.queue, arguments );
  2581. },
  2582. /**
  2583. * @event reset
  2584. * @description 当 uploader 被重置的时候触发。
  2585. * @for Uploader
  2586. */
  2587. /**
  2588. * @method reset
  2589. * @grammar reset() => undefined
  2590. * @description 重置uploader。目前只重置了队列。
  2591. * @for Uploader
  2592. * @example
  2593. * uploader.reset();
  2594. */
  2595. reset: function() {
  2596. this.owner.trigger('reset');
  2597. this.queue = new Queue();
  2598. this.stats = this.queue.stats;
  2599. },
  2600. destroy: function() {
  2601. this.reset();
  2602. this.placeholder && this.placeholder.destroy();
  2603. }
  2604. });
  2605. });
  2606. /**
  2607. * @fileOverview 添加获取Runtime相关信息的方法。
  2608. */
  2609. define('widgets/runtime',[
  2610. 'uploader',
  2611. 'runtime/runtime',
  2612. 'widgets/widget'
  2613. ], function( Uploader, Runtime ) {
  2614. Uploader.support = function() {
  2615. return Runtime.hasRuntime.apply( Runtime, arguments );
  2616. };
  2617. /**
  2618. * @property {Object} [runtimeOrder=html5,flash]
  2619. * @namespace options
  2620. * @for Uploader
  2621. * @description 指定运行时启动顺序。默认会先尝试 html5 是否支持,如果支持则使用 html5, 否则使用 flash.
  2622. *
  2623. * 可以将此值设置成 `flash`,来强制使用 flash 运行时。
  2624. */
  2625. return Uploader.register({
  2626. name: 'runtime',
  2627. init: function() {
  2628. if ( !this.predictRuntimeType() ) {
  2629. throw Error('Runtime Error');
  2630. }
  2631. },
  2632. /**
  2633. * 预测Uploader将采用哪个`Runtime`
  2634. * @grammar predictRuntimeType() => String
  2635. * @method predictRuntimeType
  2636. * @for Uploader
  2637. */
  2638. predictRuntimeType: function() {
  2639. var orders = this.options.runtimeOrder || Runtime.orders,
  2640. type = this.type,
  2641. i, len;
  2642. if ( !type ) {
  2643. orders = orders.split( /\s*,\s*/g );
  2644. for ( i = 0, len = orders.length; i < len; i++ ) {
  2645. if ( Runtime.hasRuntime( orders[ i ] ) ) {
  2646. this.type = type = orders[ i ];
  2647. break;
  2648. }
  2649. }
  2650. }
  2651. return type;
  2652. }
  2653. });
  2654. });
  2655. /**
  2656. * @fileOverview Transport
  2657. */
  2658. define('lib/transport',[
  2659. 'base',
  2660. 'runtime/client',
  2661. 'mediator'
  2662. ], function( Base, RuntimeClient, Mediator ) {
  2663. var $ = Base.$;
  2664. function Transport( opts ) {
  2665. var me = this;
  2666. opts = me.options = $.extend( true, {}, Transport.options, opts || {} );
  2667. RuntimeClient.call( this, 'Transport' );
  2668. this._blob = null;
  2669. this._formData = opts.formData || {};
  2670. this._headers = opts.headers || {};
  2671. this.on( 'progress', this._timeout );
  2672. this.on( 'load error', function() {
  2673. me.trigger( 'progress', 1 );
  2674. clearTimeout( me._timer );
  2675. });
  2676. }
  2677. Transport.options = {
  2678. server: '',
  2679. method: 'POST',
  2680. // 跨域时,是否允许携带cookie, 只有html5 runtime才有效
  2681. withCredentials: false,
  2682. fileVal: 'file',
  2683. timeout: 2 * 60 * 1000, // 2分钟
  2684. formData: {},
  2685. headers: {},
  2686. sendAsBinary: false
  2687. };
  2688. $.extend( Transport.prototype, {
  2689. // 添加Blob, 只能添加一次,最后一次有效。
  2690. appendBlob: function( key, blob, filename ) {
  2691. var me = this,
  2692. opts = me.options;
  2693. if ( me.getRuid() ) {
  2694. me.disconnectRuntime();
  2695. }
  2696. // 连接到blob归属的同一个runtime.
  2697. me.connectRuntime( blob.ruid, function() {
  2698. me.exec('init');
  2699. });
  2700. me._blob = blob;
  2701. opts.fileVal = key || opts.fileVal;
  2702. opts.filename = filename || opts.filename;
  2703. },
  2704. // 添加其他字段
  2705. append: function( key, value ) {
  2706. if ( typeof key === 'object' ) {
  2707. $.extend( this._formData, key );
  2708. } else {
  2709. this._formData[ key ] = value;
  2710. }
  2711. },
  2712. setRequestHeader: function( key, value ) {
  2713. if ( typeof key === 'object' ) {
  2714. $.extend( this._headers, key );
  2715. } else {
  2716. this._headers[ key ] = value;
  2717. }
  2718. },
  2719. send: function( method ) {
  2720. this.exec( 'send', method );
  2721. this._timeout();
  2722. },
  2723. abort: function() {
  2724. clearTimeout( this._timer );
  2725. return this.exec('abort');
  2726. },
  2727. destroy: function() {
  2728. this.trigger('destroy');
  2729. this.off();
  2730. this.exec('destroy');
  2731. this.disconnectRuntime();
  2732. },
  2733. getResponseHeaders: function() {
  2734. return this.exec('getResponseHeaders');
  2735. },
  2736. getResponse: function() {
  2737. return this.exec('getResponse');
  2738. },
  2739. getResponseAsJson: function() {
  2740. return this.exec('getResponseAsJson');
  2741. },
  2742. getStatus: function() {
  2743. return this.exec('getStatus');
  2744. },
  2745. _timeout: function() {
  2746. var me = this,
  2747. duration = me.options.timeout;
  2748. if ( !duration ) {
  2749. return;
  2750. }
  2751. clearTimeout( me._timer );
  2752. me._timer = setTimeout(function() {
  2753. me.abort();
  2754. me.trigger( 'error', 'timeout' );
  2755. }, duration );
  2756. }
  2757. });
  2758. // 让Transport具备事件功能。
  2759. Mediator.installTo( Transport.prototype );
  2760. return Transport;
  2761. });
  2762. /**
  2763. * @fileOverview 负责文件上传相关。
  2764. */
  2765. define('widgets/upload',[
  2766. 'base',
  2767. 'uploader',
  2768. 'file',
  2769. 'lib/transport',
  2770. 'widgets/widget'
  2771. ], function( Base, Uploader, WUFile, Transport ) {
  2772. var $ = Base.$,
  2773. isPromise = Base.isPromise,
  2774. Status = WUFile.Status;
  2775. // 添加默认配置项
  2776. $.extend( Uploader.options, {
  2777. /**
  2778. * @property {Boolean} [prepareNextFile=false]
  2779. * @namespace options
  2780. * @for Uploader
  2781. * @description 是否允许在文件传输时提前把下一个文件准备好。
  2782. * 某些文件的准备工作比较耗时,比如图片压缩,md5序列化。
  2783. * 如果能提前在当前文件传输期处理,可以节省总体耗时。
  2784. */
  2785. prepareNextFile: false,
  2786. /**
  2787. * @property {Boolean} [chunked=false]
  2788. * @namespace options
  2789. * @for Uploader
  2790. * @description 是否要分片处理大文件上传。
  2791. */
  2792. chunked: false,
  2793. /**
  2794. * @property {Boolean} [chunkSize=5242880]
  2795. * @namespace options
  2796. * @for Uploader
  2797. * @description 如果要分片,分多大一片? 默认大小为5M.
  2798. */
  2799. chunkSize: 5 * 1024 * 1024,
  2800. /**
  2801. * @property {Boolean} [chunkRetry=2]
  2802. * @namespace options
  2803. * @for Uploader
  2804. * @description 如果某个分片由于网络问题出错,允许自动重传多少次?
  2805. */
  2806. chunkRetry: 2,
  2807. /**
  2808. * @property {Number} [chunkRetryDelay=1000]
  2809. * @namespace options
  2810. * @for Uploader
  2811. * @description 开启重试后,设置重试延时时间, 单位毫秒。默认1000毫秒,即1秒.
  2812. */
  2813. chunkRetryDelay: 1000,
  2814. /**
  2815. * @property {Boolean} [threads=3]
  2816. * @namespace options
  2817. * @for Uploader
  2818. * @description 上传并发数。允许同时最大上传进程数。
  2819. */
  2820. threads: 3,
  2821. /**
  2822. * @property {Object} [formData={}]
  2823. * @namespace options
  2824. * @for Uploader
  2825. * @description 文件上传请求的参数表,每次发送都会发送此对象中的参数。
  2826. */
  2827. formData: {}
  2828. /**
  2829. * @property {Object} [fileVal='file']
  2830. * @namespace options
  2831. * @for Uploader
  2832. * @description 设置文件上传域的name。
  2833. */
  2834. /**
  2835. * @property {Object} [method=POST]
  2836. * @namespace options
  2837. * @for Uploader
  2838. * @description 文件上传方式,`POST` 或者 `GET`。
  2839. */
  2840. /**
  2841. * @property {Object} [sendAsBinary=false]
  2842. * @namespace options
  2843. * @for Uploader
  2844. * @description 是否已二进制的流的方式发送文件,这样整个上传内容`php://input`都为文件内容,
  2845. * 其他参数在$_GET数组中。
  2846. */
  2847. });
  2848. // 负责将文件切片。
  2849. function CuteFile( file, chunkSize ) {
  2850. var pending = [],
  2851. blob = file.source,
  2852. total = blob.size,
  2853. chunks = chunkSize ? Math.ceil( total / chunkSize ) : 1,
  2854. start = 0,
  2855. index = 0,
  2856. len, api;
  2857. api = {
  2858. file: file,
  2859. has: function() {
  2860. return !!pending.length;
  2861. },
  2862. shift: function() {
  2863. return pending.shift();
  2864. },
  2865. unshift: function( block ) {
  2866. pending.unshift( block );
  2867. }
  2868. };
  2869. while ( index < chunks ) {
  2870. len = Math.min( chunkSize, total - start );
  2871. pending.push({
  2872. file: file,
  2873. start: start,
  2874. end: chunkSize ? (start + len) : total,
  2875. total: total,
  2876. chunks: chunks,
  2877. chunk: index++,
  2878. cuted: api
  2879. });
  2880. start += len;
  2881. }
  2882. file.blocks = pending.concat();
  2883. file.remaning = pending.length;
  2884. return api;
  2885. }
  2886. Uploader.register({
  2887. name: 'upload',
  2888. init: function() {
  2889. var owner = this.owner,
  2890. me = this;
  2891. this.runing = false;
  2892. this.progress = false;
  2893. owner
  2894. .on( 'startUpload', function() {
  2895. me.progress = true;
  2896. })
  2897. .on( 'uploadFinished', function() {
  2898. me.progress = false;
  2899. });
  2900. // 记录当前正在传的数据,跟threads相关
  2901. this.pool = [];
  2902. // 缓存分好片的文件。
  2903. this.stack = [];
  2904. // 缓存即将上传的文件。
  2905. this.pending = [];
  2906. // 跟踪还有多少分片在上传中但是没有完成上传。
  2907. this.remaning = 0;
  2908. this.__tick = Base.bindFn( this._tick, this );
  2909. // 销毁上传相关的属性。
  2910. owner.on( 'uploadComplete', function( file ) {
  2911. // 把其他块取消了。
  2912. file.blocks && $.each( file.blocks, function( _, v ) {
  2913. v.transport && (v.transport.abort(), v.transport.destroy());
  2914. delete v.transport;
  2915. });
  2916. delete file.blocks;
  2917. delete file.remaning;
  2918. });
  2919. },
  2920. reset: function() {
  2921. this.request( 'stop-upload', true );
  2922. this.runing = false;
  2923. this.pool = [];
  2924. this.stack = [];
  2925. this.pending = [];
  2926. this.remaning = 0;
  2927. this._trigged = false;
  2928. this._promise = null;
  2929. },
  2930. /**
  2931. * @event startUpload
  2932. * @description 当开始上传流程时触发。
  2933. * @for Uploader
  2934. */
  2935. /**
  2936. * 开始上传。此方法可以从初始状态调用开始上传流程,也可以从暂停状态调用,继续上传流程。
  2937. *
  2938. * 可以指定开始某一个文件。
  2939. * @grammar upload() => undefined
  2940. * @grammar upload( file | fileId) => undefined
  2941. * @method upload
  2942. * @for Uploader
  2943. */
  2944. startUpload: function(file) {
  2945. var me = this;
  2946. // 移出invalid的文件
  2947. $.each( me.request( 'get-files', Status.INVALID ), function() {
  2948. me.request( 'remove-file', this );
  2949. });
  2950. // 如果指定了开始某个文件,则只开始指定的文件。
  2951. if ( file ) {
  2952. file = file.id ? file : me.request( 'get-file', file );
  2953. if (file.getStatus() === Status.INTERRUPT) {
  2954. file.setStatus( Status.QUEUED );
  2955. $.each( me.pool, function( _, v ) {
  2956. // 之前暂停过。
  2957. if (v.file !== file) {
  2958. return;
  2959. }
  2960. v.transport && v.transport.send();
  2961. file.setStatus( Status.PROGRESS );
  2962. });
  2963. } else if (file.getStatus() !== Status.PROGRESS) {
  2964. file.setStatus( Status.QUEUED );
  2965. }
  2966. } else {
  2967. $.each( me.request( 'get-files', [ Status.INITED ] ), function() {
  2968. this.setStatus( Status.QUEUED );
  2969. });
  2970. }
  2971. if ( me.runing ) {
  2972. me.owner.trigger('startUpload', file);// 开始上传或暂停恢复的,trigger event
  2973. return Base.nextTick( me.__tick );
  2974. }
  2975. me.runing = true;
  2976. var files = [];
  2977. // 如果有暂停的,则续传
  2978. file || $.each( me.pool, function( _, v ) {
  2979. var file = v.file;
  2980. if ( file.getStatus() === Status.INTERRUPT ) {
  2981. me._trigged = false;
  2982. files.push(file);
  2983. if (v.waiting) {
  2984. return;
  2985. }
  2986. // 文件 prepare 完后,如果暂停了,这个时候只会把文件插入 pool, 而不会创建 tranport,
  2987. v.transport ? v.transport.send() : me._doSend(v);
  2988. }
  2989. });
  2990. $.each(files, function() {
  2991. this.setStatus( Status.PROGRESS );
  2992. });
  2993. file || $.each( me.request( 'get-files',
  2994. Status.INTERRUPT ), function() {
  2995. this.setStatus( Status.PROGRESS );
  2996. });
  2997. me._trigged = false;
  2998. Base.nextTick( me.__tick );
  2999. me.owner.trigger('startUpload');
  3000. },
  3001. /**
  3002. * @event stopUpload
  3003. * @description 当开始上传流程暂停时触发。
  3004. * @for Uploader
  3005. */
  3006. /**
  3007. * 暂停上传。第一个参数为是否中断上传当前正在上传的文件。
  3008. *
  3009. * 如果第一个参数是文件,则只暂停指定文件。
  3010. * @grammar stop() => undefined
  3011. * @grammar stop( true ) => undefined
  3012. * @grammar stop( file ) => undefined
  3013. * @method stop
  3014. * @for Uploader
  3015. */
  3016. stopUpload: function( file, interrupt ) {
  3017. var me = this;
  3018. if (file === true) {
  3019. interrupt = file;
  3020. file = null;
  3021. }
  3022. if ( me.runing === false ) {
  3023. return;
  3024. }
  3025. // 如果只是暂停某个文件。
  3026. if ( file ) {
  3027. file = file.id ? file : me.request( 'get-file', file );
  3028. if ( file.getStatus() !== Status.PROGRESS &&
  3029. file.getStatus() !== Status.QUEUED ) {
  3030. return;
  3031. }
  3032. file.setStatus( Status.INTERRUPT );
  3033. $.each( me.pool, function( _, v ) {
  3034. // 只 abort 指定的文件,每一个分片。
  3035. if (v.file === file) {
  3036. v.transport && v.transport.abort();
  3037. if (interrupt) {
  3038. me._putback(v);
  3039. me._popBlock(v);
  3040. }
  3041. }
  3042. });
  3043. me.owner.trigger('stopUpload', file);// 暂停,trigger event
  3044. return Base.nextTick( me.__tick );
  3045. }
  3046. me.runing = false;
  3047. // 正在准备中的文件。
  3048. if (this._promise && this._promise.file) {
  3049. this._promise.file.setStatus( Status.INTERRUPT );
  3050. }
  3051. interrupt && $.each( me.pool, function( _, v ) {
  3052. v.transport && v.transport.abort();
  3053. v.file.setStatus( Status.INTERRUPT );
  3054. });
  3055. me.owner.trigger('stopUpload');
  3056. },
  3057. /**
  3058. * @method cancelFile
  3059. * @grammar cancelFile( file ) => undefined
  3060. * @grammar cancelFile( id ) => undefined
  3061. * @param {File|id} file File对象或这File对象的id
  3062. * @description 标记文件状态为已取消, 同时将中断文件传输。
  3063. * @for Uploader
  3064. * @example
  3065. *
  3066. * $li.on('click', '.remove-this', function() {
  3067. * uploader.cancelFile( file );
  3068. * })
  3069. */
  3070. cancelFile: function( file ) {
  3071. file = file.id ? file : this.request( 'get-file', file );
  3072. // 如果正在上传。
  3073. file.blocks && $.each( file.blocks, function( _, v ) {
  3074. var _tr = v.transport;
  3075. if ( _tr ) {
  3076. _tr.abort();
  3077. _tr.destroy();
  3078. delete v.transport;
  3079. }
  3080. });
  3081. file.setStatus( Status.CANCELLED );
  3082. this.owner.trigger( 'fileDequeued', file );
  3083. },
  3084. /**
  3085. * 判断`Uploader`是否正在上传中。
  3086. * @grammar isInProgress() => Boolean
  3087. * @method isInProgress
  3088. * @for Uploader
  3089. */
  3090. isInProgress: function() {
  3091. return !!this.progress;
  3092. },
  3093. _getStats: function() {
  3094. return this.request('get-stats');
  3095. },
  3096. /**
  3097. * 跳过一个文件上传,直接标记指定文件为已上传状态。
  3098. * @grammar skipFile( file ) => undefined
  3099. * @method skipFile
  3100. * @for Uploader
  3101. */
  3102. skipFile: function( file, status ) {
  3103. file = file.id ? file : this.request( 'get-file', file );
  3104. file.setStatus( status || Status.COMPLETE );
  3105. file.skipped = true;
  3106. // 如果正在上传。
  3107. file.blocks && $.each( file.blocks, function( _, v ) {
  3108. var _tr = v.transport;
  3109. if ( _tr ) {
  3110. _tr.abort();
  3111. _tr.destroy();
  3112. delete v.transport;
  3113. }
  3114. });
  3115. this.owner.trigger( 'uploadSkip', file );
  3116. },
  3117. /**
  3118. * @event uploadFinished
  3119. * @description 当所有文件上传结束时触发。
  3120. * @for Uploader
  3121. */
  3122. _tick: function() {
  3123. var me = this,
  3124. opts = me.options,
  3125. fn, val;
  3126. // 上一个promise还没有结束,则等待完成后再执行。
  3127. if ( me._promise ) {
  3128. return me._promise.always( me.__tick );
  3129. }
  3130. // 还有位置,且还有文件要处理的话。
  3131. if ( me.pool.length < opts.threads && (val = me._nextBlock()) ) {
  3132. me._trigged = false;
  3133. fn = function( val ) {
  3134. me._promise = null;
  3135. // 有可能是reject过来的,所以要检测val的类型。
  3136. val && val.file && me._startSend( val );
  3137. Base.nextTick( me.__tick );
  3138. };
  3139. me._promise = isPromise( val ) ? val.always( fn ) : fn( val );
  3140. // 没有要上传的了,且没有正在传输的了。
  3141. } else if ( !me.remaning && !me._getStats().numOfQueue &&
  3142. !me._getStats().numOfInterrupt ) {
  3143. me.runing = false;
  3144. me._trigged || Base.nextTick(function() {
  3145. me.owner.trigger('uploadFinished');
  3146. });
  3147. me._trigged = true;
  3148. }
  3149. },
  3150. _putback: function(block) {
  3151. var idx;
  3152. block.cuted.unshift(block);
  3153. idx = this.stack.indexOf(block.cuted);
  3154. if (!~idx) {
  3155. // 如果不在里面,说明移除过,需要把计数还原回去。
  3156. this.remaning++;
  3157. block.file.remaning++;
  3158. this.stack.unshift(block.cuted);
  3159. }
  3160. },
  3161. _getStack: function() {
  3162. var i = 0,
  3163. act;
  3164. while ( (act = this.stack[ i++ ]) ) {
  3165. if ( act.has() && act.file.getStatus() === Status.PROGRESS ) {
  3166. return act;
  3167. } else if (!act.has() ||
  3168. act.file.getStatus() !== Status.PROGRESS &&
  3169. act.file.getStatus() !== Status.INTERRUPT ) {
  3170. // 把已经处理完了的,或者,状态为非 progress(上传中)、
  3171. // interupt(暂停中) 的移除。
  3172. this.stack.splice( --i, 1 );
  3173. }
  3174. }
  3175. return null;
  3176. },
  3177. _nextBlock: function() {
  3178. var me = this,
  3179. opts = me.options,
  3180. act, next, done, preparing;
  3181. // 如果当前文件还有没有需要传输的,则直接返回剩下的。
  3182. if ( (act = this._getStack()) ) {
  3183. // 是否提前准备下一个文件
  3184. if ( opts.prepareNextFile && !me.pending.length ) {
  3185. me._prepareNextFile();
  3186. }
  3187. return act.shift();
  3188. // 否则,如果正在运行,则准备下一个文件,并等待完成后返回下个分片。
  3189. } else if ( me.runing ) {
  3190. // 如果缓存中有,则直接在缓存中取,没有则去queue中取。
  3191. if ( !me.pending.length && me._getStats().numOfQueue ) {
  3192. me._prepareNextFile();
  3193. }
  3194. next = me.pending.shift();
  3195. done = function( file ) {
  3196. if ( !file ) {
  3197. return null;
  3198. }
  3199. act = CuteFile( file, opts.chunked ? opts.chunkSize : 0 );
  3200. me.stack.push(act);
  3201. return act.shift();
  3202. };
  3203. // 文件可能还在prepare中,也有可能已经完全准备好了。
  3204. if ( isPromise( next) ) {
  3205. preparing = next.file;
  3206. next = next[ next.pipe ? 'pipe' : 'then' ]( done );
  3207. next.file = preparing;
  3208. return next;
  3209. }
  3210. return done( next );
  3211. }
  3212. },
  3213. /**
  3214. * @event uploadStart
  3215. * @param {File} file File对象
  3216. * @description 某个文件开始上传前触发,一个文件只会触发一次。
  3217. * @for Uploader
  3218. */
  3219. _prepareNextFile: function() {
  3220. var me = this,
  3221. file = me.request('fetch-file'),
  3222. pending = me.pending,
  3223. promise;
  3224. if ( file ) {
  3225. promise = me.request( 'before-send-file', file, function() {
  3226. // 有可能文件被skip掉了。文件被skip掉后,状态坑定不是Queued.
  3227. if ( file.getStatus() === Status.PROGRESS ||
  3228. file.getStatus() === Status.INTERRUPT ) {
  3229. return file;
  3230. }
  3231. return me._finishFile( file );
  3232. });
  3233. me.owner.trigger( 'uploadStart', file );
  3234. file.setStatus( Status.PROGRESS );
  3235. promise.file = file;
  3236. // 如果还在pending中,则替换成文件本身。
  3237. promise.done(function() {
  3238. var idx = $.inArray( promise, pending );
  3239. ~idx && pending.splice( idx, 1, file );
  3240. });
  3241. // befeore-send-file的钩子就有错误发生。
  3242. promise.fail(function( reason ) {
  3243. file.setStatus( Status.ERROR, reason );
  3244. me.owner.trigger( 'uploadError', file, reason );
  3245. me.owner.trigger( 'uploadComplete', file );
  3246. });
  3247. pending.push( promise );
  3248. }
  3249. },
  3250. // 让出位置了,可以让其他分片开始上传
  3251. _popBlock: function( block ) {
  3252. var idx = $.inArray( block, this.pool );
  3253. this.pool.splice( idx, 1 );
  3254. block.file.remaning--;
  3255. this.remaning--;
  3256. },
  3257. // 开始上传,可以被掉过。如果promise被reject了,则表示跳过此分片。
  3258. _startSend: function( block ) {
  3259. var me = this,
  3260. file = block.file,
  3261. promise;
  3262. // 有可能在 before-send-file 的 promise 期间改变了文件状态。
  3263. // 如:暂停,取消
  3264. // 我们不能中断 promise, 但是可以在 promise 完后,不做上传操作。
  3265. if ( file.getStatus() !== Status.PROGRESS ) {
  3266. // 如果是中断,则还需要放回去。
  3267. if (file.getStatus() === Status.INTERRUPT) {
  3268. me._putback(block);
  3269. }
  3270. return;
  3271. }
  3272. me.pool.push( block );
  3273. me.remaning++;
  3274. // 如果没有分片,则直接使用原始的。
  3275. // 不会丢失content-type信息。
  3276. block.blob = block.chunks === 1 ? file.source :
  3277. file.source.slice( block.start, block.end );
  3278. // hook, 每个分片发送之前可能要做些异步的事情。
  3279. block.waiting = promise = me.request( 'before-send', block, function() {
  3280. delete block.waiting;
  3281. // 有可能文件已经上传出错了,所以不需要再传输了。
  3282. if ( file.getStatus() === Status.PROGRESS ) {
  3283. me._doSend( block );
  3284. } else if (block.file.getStatus() !== Status.INTERRUPT) {
  3285. me._popBlock(block);
  3286. }
  3287. Base.nextTick(me.__tick);
  3288. });
  3289. // 如果为fail了,则跳过此分片。
  3290. promise.fail(function() {
  3291. delete block.waiting;
  3292. if ( file.remaning === 1 ) {
  3293. me._finishFile( file ).always(function() {
  3294. block.percentage = 1;
  3295. me._popBlock( block );
  3296. me.owner.trigger( 'uploadComplete', file );
  3297. Base.nextTick( me.__tick );
  3298. });
  3299. } else {
  3300. block.percentage = 1;
  3301. me.updateFileProgress( file );
  3302. me._popBlock( block );
  3303. Base.nextTick( me.__tick );
  3304. }
  3305. });
  3306. },
  3307. /**
  3308. * @event uploadBeforeSend
  3309. * @param {Object} object
  3310. * @param {Object} data 默认的上传参数,可以扩展此对象来控制上传参数。
  3311. * @param {Object} headers 可以扩展此对象来控制上传头部。
  3312. * @description 当某个文件的分块在发送前触发,主要用来询问是否要添加附带参数,大文件在开起分片上传的前提下此事件可能会触发多次。
  3313. * @for Uploader
  3314. */
  3315. /**
  3316. * @event uploadAccept
  3317. * @param {Object} object
  3318. * @param {Object} ret 服务端的返回数据,json格式,如果服务端不是json格式,从ret._raw中取数据,自行解析。
  3319. * @description 当某个文件上传到服务端响应后,会派送此事件来询问服务端响应是否有效。如果此事件handler返回值为`false`, 则此文件将派送`server`类型的`uploadError`事件。
  3320. * @for Uploader
  3321. */
  3322. /**
  3323. * @event uploadProgress
  3324. * @param {File} file File对象
  3325. * @param {Number} percentage 上传进度
  3326. * @description 上传过程中触发,携带上传进度。
  3327. * @for Uploader
  3328. */
  3329. /**
  3330. * @event uploadError
  3331. * @param {File} file File对象
  3332. * @param {String} reason 出错的code
  3333. * @description 当文件上传出错时触发。
  3334. * @for Uploader
  3335. */
  3336. /**
  3337. * @event uploadSuccess
  3338. * @param {File} file File对象
  3339. * @param {Object} response 服务端返回的数据
  3340. * @description 当文件上传成功时触发。
  3341. * @for Uploader
  3342. */
  3343. /**
  3344. * @event uploadComplete
  3345. * @param {File} [file] File对象
  3346. * @description 不管成功或者失败,文件上传完成时触发。
  3347. * @for Uploader
  3348. */
  3349. // 做上传操作。
  3350. _doSend: function( block ) {
  3351. var me = this,
  3352. owner = me.owner,
  3353. opts = $.extend({}, me.options, block.options),
  3354. file = block.file,
  3355. tr = new Transport( opts ),
  3356. data = $.extend({}, opts.formData ),
  3357. headers = $.extend({}, opts.headers ),
  3358. requestAccept, ret;
  3359. block.transport = tr;
  3360. tr.on( 'destroy', function() {
  3361. delete block.transport;
  3362. me._popBlock( block );
  3363. Base.nextTick( me.__tick );
  3364. });
  3365. // 广播上传进度。以文件为单位。
  3366. tr.on( 'progress', function( percentage ) {
  3367. block.percentage = percentage;
  3368. me.updateFileProgress( file );
  3369. });
  3370. // 用来询问,是否返回的结果是有错误的。
  3371. requestAccept = function( reject ) {
  3372. var fn;
  3373. ret = tr.getResponseAsJson() || {};
  3374. ret._raw = tr.getResponse();
  3375. ret._headers = tr.getResponseHeaders();
  3376. block.response = ret;
  3377. fn = function( value ) {
  3378. reject = value;
  3379. };
  3380. // 服务端响应了,不代表成功了,询问是否响应正确。
  3381. if ( !owner.trigger( 'uploadAccept', block, ret, fn ) ) {
  3382. reject = reject || 'server';
  3383. }
  3384. return reject;
  3385. };
  3386. // 尝试重试,然后广播文件上传出错。
  3387. tr.on( 'error', function( type, flag ) {
  3388. // 在 runtime/html5/transport.js 上为 type 加上了状态码,形式:type|status|text(如:http-403-Forbidden)
  3389. // 这里把状态码解释出来,并还原后面代码所依赖的 type 变量
  3390. var typeArr = type.split( '|' ), status, statusText;
  3391. type = typeArr[0];
  3392. status = parseFloat( typeArr[1] ),
  3393. statusText = typeArr[2];
  3394. block.retried = block.retried || 0;
  3395. // 自动重试
  3396. if ( block.chunks > 1 && ~'http,abort,server'.indexOf( type.replace( /-.*/, '' ) ) &&
  3397. block.retried < opts.chunkRetry ) {
  3398. block.retried++;
  3399. me.retryTimer = setTimeout(function() {
  3400. tr.send();
  3401. }, opts.chunkRetryDelay || 1000);
  3402. } else {
  3403. // http status 500 ~ 600
  3404. if ( !flag && type === 'server' ) {
  3405. type = requestAccept( type );
  3406. }
  3407. file.setStatus( Status.ERROR, type );
  3408. owner.trigger( 'uploadError', file, type, status, statusText );
  3409. owner.trigger( 'uploadComplete', file );
  3410. }
  3411. });
  3412. // 上传成功
  3413. tr.on( 'load', function() {
  3414. var reason;
  3415. // 如果非预期,转向上传出错。
  3416. if ( (reason = requestAccept()) ) {
  3417. tr.trigger( 'error', reason, true );
  3418. return;
  3419. }
  3420. // 全部上传完成。
  3421. if ( file.remaning === 1 ) {
  3422. me._finishFile( file, ret );
  3423. } else {
  3424. tr.destroy();
  3425. }
  3426. });
  3427. // 配置默认的上传字段。
  3428. data = $.extend( data, {
  3429. id: file.id,
  3430. name: file.name,
  3431. type: file.type,
  3432. lastModifiedDate: file.lastModifiedDate,
  3433. size: file.size
  3434. });
  3435. block.chunks > 1 && $.extend( data, {
  3436. chunks: block.chunks,
  3437. chunk: block.chunk
  3438. });
  3439. // 在发送之间可以添加字段什么的。。。
  3440. // 如果默认的字段不够使用,可以通过监听此事件来扩展
  3441. owner.trigger( 'uploadBeforeSend', block, data, headers );
  3442. // 开始发送。
  3443. tr.appendBlob( opts.fileVal, block.blob, file.name );
  3444. tr.append( data );
  3445. tr.setRequestHeader( headers );
  3446. tr.send();
  3447. },
  3448. // 完成上传。
  3449. _finishFile: function( file, ret, hds ) {
  3450. var owner = this.owner;
  3451. return owner
  3452. .request( 'after-send-file', arguments, function() {
  3453. file.setStatus( Status.COMPLETE );
  3454. owner.trigger( 'uploadSuccess', file, ret, hds );
  3455. })
  3456. .fail(function( reason ) {
  3457. // 如果外部已经标记为invalid什么的,不再改状态。
  3458. if ( file.getStatus() === Status.PROGRESS ) {
  3459. file.setStatus( Status.ERROR, reason );
  3460. }
  3461. owner.trigger( 'uploadError', file, reason );
  3462. })
  3463. .always(function() {
  3464. owner.trigger( 'uploadComplete', file );
  3465. });
  3466. },
  3467. updateFileProgress: function(file) {
  3468. var totalPercent = 0,
  3469. uploaded = 0;
  3470. if (!file.blocks) {
  3471. return;
  3472. }
  3473. $.each( file.blocks, function( _, v ) {
  3474. uploaded += (v.percentage || 0) * (v.end - v.start);
  3475. });
  3476. totalPercent = uploaded / file.size;
  3477. this.owner.trigger( 'uploadProgress', file, totalPercent || 0 );
  3478. },
  3479. destroy: function() {
  3480. clearTimeout(this.retryTimer);
  3481. }
  3482. });
  3483. });
  3484. /**
  3485. * @fileOverview 各种验证,包括文件总大小是否超出、单文件是否超出和文件是否重复。
  3486. */
  3487. define('widgets/validator',[
  3488. 'base',
  3489. 'uploader',
  3490. 'file',
  3491. 'widgets/widget'
  3492. ], function( Base, Uploader, WUFile ) {
  3493. var $ = Base.$,
  3494. validators = {},
  3495. api;
  3496. /**
  3497. * @event error
  3498. * @param {String} type 错误类型。
  3499. * @description 当validate不通过时,会以派送错误事件的形式通知调用者。通过`upload.on('error', handler)`可以捕获到此类错误,目前有以下错误会在特定的情况下派送错来。
  3500. *
  3501. * * `Q_EXCEED_NUM_LIMIT` 在设置了`fileNumLimit`且尝试给`uploader`添加的文件数量超出这个值时派送。
  3502. * * `Q_EXCEED_SIZE_LIMIT` 在设置了`Q_EXCEED_SIZE_LIMIT`且尝试给`uploader`添加的文件总大小超出这个值时派送。
  3503. * * `Q_TYPE_DENIED` 当文件类型不满足时触发。。
  3504. * @for Uploader
  3505. */
  3506. // 暴露给外面的api
  3507. api = {
  3508. // 添加验证器
  3509. addValidator: function( type, cb ) {
  3510. validators[ type ] = cb;
  3511. },
  3512. // 移除验证器
  3513. removeValidator: function( type ) {
  3514. delete validators[ type ];
  3515. }
  3516. };
  3517. // 在Uploader初始化的时候启动Validators的初始化
  3518. Uploader.register({
  3519. name: 'validator',
  3520. init: function() {
  3521. var me = this;
  3522. Base.nextTick(function() {
  3523. $.each( validators, function() {
  3524. this.call( me.owner );
  3525. });
  3526. });
  3527. }
  3528. });
  3529. /**
  3530. * @property {int} [fileNumLimit=undefined]
  3531. * @namespace options
  3532. * @for Uploader
  3533. * @description 验证文件总数量, 超出则不允许加入队列。
  3534. */
  3535. api.addValidator( 'fileNumLimit', function() {
  3536. var uploader = this,
  3537. opts = uploader.options,
  3538. count = 0,
  3539. max = parseInt( opts.fileNumLimit, 10 ),
  3540. flag = true;
  3541. if ( !max ) {
  3542. return;
  3543. }
  3544. uploader.on( 'beforeFileQueued', function( file ) {
  3545. // 增加beforeFileQueuedCheckfileNumLimit验证,主要为了再次加载时(已存在历史文件)验证数量是否超过设置项
  3546. if (!this.trigger('beforeFileQueuedCheckfileNumLimit', file,count)) {
  3547. return false;
  3548. }
  3549. if ( count >= max && flag ) {
  3550. flag = false;
  3551. this.trigger( 'error', 'Q_EXCEED_NUM_LIMIT', max, file );
  3552. setTimeout(function() {
  3553. flag = true;
  3554. }, 1 );
  3555. }
  3556. return count >= max ? false : true;
  3557. });
  3558. uploader.on( 'fileQueued', function() {
  3559. count++;
  3560. });
  3561. uploader.on( 'fileDequeued', function() {
  3562. count--;
  3563. });
  3564. uploader.on( 'reset', function() {
  3565. count = 0;
  3566. });
  3567. });
  3568. /**
  3569. * @property {int} [fileSizeLimit=undefined]
  3570. * @namespace options
  3571. * @for Uploader
  3572. * @description 验证文件总大小是否超出限制, 超出则不允许加入队列。
  3573. */
  3574. api.addValidator( 'fileSizeLimit', function() {
  3575. var uploader = this,
  3576. opts = uploader.options,
  3577. count = 0,
  3578. max = parseInt( opts.fileSizeLimit, 10 ),
  3579. flag = true;
  3580. if ( !max ) {
  3581. return;
  3582. }
  3583. uploader.on( 'beforeFileQueued', function( file ) {
  3584. var invalid = count + file.size > max;
  3585. if ( invalid && flag ) {
  3586. flag = false;
  3587. this.trigger( 'error', 'Q_EXCEED_SIZE_LIMIT', max, file );
  3588. setTimeout(function() {
  3589. flag = true;
  3590. }, 1 );
  3591. }
  3592. return invalid ? false : true;
  3593. });
  3594. uploader.on( 'fileQueued', function( file ) {
  3595. count += file.size;
  3596. });
  3597. uploader.on( 'fileDequeued', function( file ) {
  3598. count -= file.size;
  3599. });
  3600. uploader.on( 'reset', function() {
  3601. count = 0;
  3602. });
  3603. });
  3604. /**
  3605. * @property {int} [fileSingleSizeLimit=undefined]
  3606. * @namespace options
  3607. * @for Uploader
  3608. * @description 验证单个文件大小是否超出限制, 超出则不允许加入队列。
  3609. */
  3610. api.addValidator( 'fileSingleSizeLimit', function() {
  3611. var uploader = this,
  3612. opts = uploader.options,
  3613. max = opts.fileSingleSizeLimit;
  3614. if ( !max ) {
  3615. return;
  3616. }
  3617. uploader.on( 'beforeFileQueued', function( file ) {
  3618. if ( file.size > max ) {
  3619. file.setStatus( WUFile.Status.INVALID, 'exceed_size' );
  3620. this.trigger( 'error', 'F_EXCEED_SIZE', max, file );
  3621. return false;
  3622. }
  3623. });
  3624. });
  3625. /**
  3626. * @property {Boolean} [duplicate=undefined]
  3627. * @namespace options
  3628. * @for Uploader
  3629. * @description 去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.
  3630. */
  3631. api.addValidator( 'duplicate', function() {
  3632. var uploader = this,
  3633. opts = uploader.options,
  3634. mapping = {};
  3635. if ( opts.duplicate ) {
  3636. return;
  3637. }
  3638. function hashString( str ) {
  3639. var hash = 0,
  3640. i = 0,
  3641. len = str.length,
  3642. _char;
  3643. for ( ; i < len; i++ ) {
  3644. _char = str.charCodeAt( i );
  3645. hash = _char + (hash << 6) + (hash << 16) - hash;
  3646. }
  3647. return hash;
  3648. }
  3649. uploader.on( 'beforeFileQueued', function( file ) {
  3650. var hash = file.__hash || (file.__hash = hashString( file.name +
  3651. file.size + file.lastModifiedDate ));
  3652. // 已经重复了
  3653. if ( mapping[ hash ] ) {
  3654. this.trigger( 'error', 'F_DUPLICATE', file );
  3655. return false;
  3656. }
  3657. });
  3658. uploader.on( 'fileQueued', function( file ) {
  3659. var hash = file.__hash;
  3660. hash && (mapping[ hash ] = true);
  3661. });
  3662. uploader.on( 'fileDequeued', function( file ) {
  3663. var hash = file.__hash;
  3664. hash && (delete mapping[ hash ]);
  3665. });
  3666. uploader.on( 'reset', function() {
  3667. mapping = {};
  3668. });
  3669. });
  3670. return api;
  3671. });
  3672. /**
  3673. * @fileOverview Runtime管理器,负责Runtime的选择, 连接
  3674. */
  3675. define('runtime/compbase',[],function() {
  3676. function CompBase( owner, runtime ) {
  3677. this.owner = owner;
  3678. this.options = owner.options;
  3679. this.getRuntime = function() {
  3680. return runtime;
  3681. };
  3682. this.getRuid = function() {
  3683. return runtime.uid;
  3684. };
  3685. this.trigger = function() {
  3686. return owner.trigger.apply( owner, arguments );
  3687. };
  3688. }
  3689. return CompBase;
  3690. });
  3691. /**
  3692. * @fileOverview Html5Runtime
  3693. */
  3694. define('runtime/html5/runtime',[
  3695. 'base',
  3696. 'runtime/runtime',
  3697. 'runtime/compbase'
  3698. ], function( Base, Runtime, CompBase ) {
  3699. var type = 'html5',
  3700. components = {};
  3701. function Html5Runtime() {
  3702. var pool = {},
  3703. me = this,
  3704. destroy = this.destroy;
  3705. Runtime.apply( me, arguments );
  3706. me.type = type;
  3707. // 这个方法的调用者,实际上是RuntimeClient
  3708. me.exec = function( comp, fn/*, args...*/) {
  3709. var client = this,
  3710. uid = client.uid,
  3711. args = Base.slice( arguments, 2 ),
  3712. instance;
  3713. if ( components[ comp ] ) {
  3714. instance = pool[ uid ] = pool[ uid ] ||
  3715. new components[ comp ]( client, me );
  3716. if ( instance[ fn ] ) {
  3717. return instance[ fn ].apply( instance, args );
  3718. }
  3719. }
  3720. };
  3721. me.destroy = function() {
  3722. // @todo 删除池子中的所有实例
  3723. return destroy && destroy.apply( this, arguments );
  3724. };
  3725. }
  3726. Base.inherits( Runtime, {
  3727. constructor: Html5Runtime,
  3728. // 不需要连接其他程序,直接执行callback
  3729. init: function() {
  3730. var me = this;
  3731. setTimeout(function() {
  3732. me.trigger('ready');
  3733. }, 1 );
  3734. }
  3735. });
  3736. // 注册Components
  3737. Html5Runtime.register = function( name, component ) {
  3738. var klass = components[ name ] = Base.inherits( CompBase, component );
  3739. return klass;
  3740. };
  3741. // 注册html5运行时。
  3742. // 只有在支持的前提下注册。
  3743. if ( window.Blob && window.FileReader && window.DataView ) {
  3744. Runtime.addRuntime( type, Html5Runtime );
  3745. }
  3746. return Html5Runtime;
  3747. });
  3748. /**
  3749. * @fileOverview Blob Html实现
  3750. */
  3751. define('runtime/html5/blob',[
  3752. 'runtime/html5/runtime',
  3753. 'lib/blob'
  3754. ], function( Html5Runtime, Blob ) {
  3755. return Html5Runtime.register( 'Blob', {
  3756. slice: function( start, end ) {
  3757. var blob = this.owner.source,
  3758. slice = blob.slice || blob.webkitSlice || blob.mozSlice;
  3759. blob = slice.call( blob, start, end );
  3760. return new Blob( this.getRuid(), blob );
  3761. }
  3762. });
  3763. });
  3764. /**
  3765. * @fileOverview FilePaste
  3766. */
  3767. define('runtime/html5/dnd',[
  3768. 'base',
  3769. 'runtime/html5/runtime',
  3770. 'lib/file'
  3771. ], function( Base, Html5Runtime, File ) {
  3772. var $ = Base.$,
  3773. prefix = 'webuploader-dnd-';
  3774. return Html5Runtime.register( 'DragAndDrop', {
  3775. init: function() {
  3776. var elem = this.elem = this.options.container;
  3777. this.dragEnterHandler = Base.bindFn( this._dragEnterHandler, this );
  3778. this.dragOverHandler = Base.bindFn( this._dragOverHandler, this );
  3779. this.dragLeaveHandler = Base.bindFn( this._dragLeaveHandler, this );
  3780. this.dropHandler = Base.bindFn( this._dropHandler, this );
  3781. this.dndOver = false;
  3782. elem.on( 'dragenter', this.dragEnterHandler );
  3783. elem.on( 'dragover', this.dragOverHandler );
  3784. elem.on( 'dragleave', this.dragLeaveHandler );
  3785. elem.on( 'drop', this.dropHandler );
  3786. if ( this.options.disableGlobalDnd ) {
  3787. $( document ).on( 'dragover', this.dragOverHandler );
  3788. $( document ).on( 'drop', this.dropHandler );
  3789. }
  3790. },
  3791. _dragEnterHandler: function( e ) {
  3792. var me = this,
  3793. denied = me._denied || false,
  3794. items;
  3795. e = e.originalEvent || e;
  3796. if ( !me.dndOver ) {
  3797. me.dndOver = true;
  3798. // 注意只有 chrome 支持。
  3799. items = e.dataTransfer.items;
  3800. if ( items && items.length ) {
  3801. me._denied = denied = !me.trigger( 'accept', items );
  3802. }
  3803. me.elem.addClass( prefix + 'over' );
  3804. me.elem[ denied ? 'addClass' :
  3805. 'removeClass' ]( prefix + 'denied' );
  3806. }
  3807. e.dataTransfer.dropEffect = denied ? 'none' : 'copy';
  3808. return false;
  3809. },
  3810. _dragOverHandler: function( e ) {
  3811. // 只处理框内的。
  3812. var parentElem = this.elem.parent().get( 0 );
  3813. if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
  3814. return false;
  3815. }
  3816. clearTimeout( this._leaveTimer );
  3817. this._dragEnterHandler.call( this, e );
  3818. return false;
  3819. },
  3820. _dragLeaveHandler: function() {
  3821. var me = this,
  3822. handler;
  3823. handler = function() {
  3824. me.dndOver = false;
  3825. me.elem.removeClass( prefix + 'over ' + prefix + 'denied' );
  3826. };
  3827. clearTimeout( me._leaveTimer );
  3828. me._leaveTimer = setTimeout( handler, 100 );
  3829. return false;
  3830. },
  3831. _dropHandler: function( e ) {
  3832. var me = this,
  3833. ruid = me.getRuid(),
  3834. parentElem = me.elem.parent().get( 0 ),
  3835. dataTransfer, data;
  3836. // 只处理框内的。
  3837. if ( parentElem && !$.contains( parentElem, e.currentTarget ) ) {
  3838. return false;
  3839. }
  3840. e = e.originalEvent || e;
  3841. dataTransfer = e.dataTransfer;
  3842. // 如果是页面内拖拽,还不能处理,不阻止事件。
  3843. // 此处 ie11 下会报参数错误,
  3844. try {
  3845. data = dataTransfer.getData('text/html');
  3846. } catch( err ) {
  3847. }
  3848. me.dndOver = false;
  3849. me.elem.removeClass( prefix + 'over' );
  3850. if ( !dataTransfer || data ) {
  3851. return;
  3852. }
  3853. me._getTansferFiles( dataTransfer, function( results ) {
  3854. me.trigger( 'drop', $.map( results, function( file ) {
  3855. return new File( ruid, file );
  3856. }) );
  3857. });
  3858. return false;
  3859. },
  3860. // 如果传入 callback 则去查看文件夹,否则只管当前文件夹。
  3861. _getTansferFiles: function( dataTransfer, callback ) {
  3862. var results = [],
  3863. promises = [],
  3864. items, files, file, item, i, len, canAccessFolder;
  3865. items = dataTransfer.items;
  3866. files = dataTransfer.files;
  3867. canAccessFolder = !!(items && items[ 0 ].webkitGetAsEntry);
  3868. for ( i = 0, len = files.length; i < len; i++ ) {
  3869. file = files[ i ];
  3870. item = items && items[ i ];
  3871. if ( canAccessFolder && item.webkitGetAsEntry().isDirectory ) {
  3872. promises.push( this._traverseDirectoryTree(
  3873. item.webkitGetAsEntry(), results ) );
  3874. } else {
  3875. results.push( file );
  3876. }
  3877. }
  3878. Base.when.apply( Base, promises ).done(function() {
  3879. if ( !results.length ) {
  3880. return;
  3881. }
  3882. callback( results );
  3883. });
  3884. },
  3885. _traverseDirectoryTree: function( entry, results ) {
  3886. var deferred = Base.Deferred(),
  3887. me = this;
  3888. if ( entry.isFile ) {
  3889. entry.file(function( file ) {
  3890. results.push( file );
  3891. deferred.resolve();
  3892. });
  3893. } else if ( entry.isDirectory ) {
  3894. entry.createReader().readEntries(function( entries ) {
  3895. var len = entries.length,
  3896. promises = [],
  3897. arr = [], // 为了保证顺序。
  3898. i;
  3899. for ( i = 0; i < len; i++ ) {
  3900. promises.push( me._traverseDirectoryTree(
  3901. entries[ i ], arr ) );
  3902. }
  3903. Base.when.apply( Base, promises ).then(function() {
  3904. results.push.apply( results, arr );
  3905. deferred.resolve();
  3906. }, deferred.reject );
  3907. });
  3908. }
  3909. return deferred.promise();
  3910. },
  3911. destroy: function() {
  3912. var elem = this.elem;
  3913. // 还没 init 就调用 destroy
  3914. if (!elem) {
  3915. return;
  3916. }
  3917. elem.off( 'dragenter', this.dragEnterHandler );
  3918. elem.off( 'dragover', this.dragOverHandler );
  3919. elem.off( 'dragleave', this.dragLeaveHandler );
  3920. elem.off( 'drop', this.dropHandler );
  3921. if ( this.options.disableGlobalDnd ) {
  3922. $( document ).off( 'dragover', this.dragOverHandler );
  3923. $( document ).off( 'drop', this.dropHandler );
  3924. }
  3925. }
  3926. });
  3927. });
  3928. /**
  3929. * @fileOverview FilePaste
  3930. */
  3931. define('runtime/html5/filepaste',[
  3932. 'base',
  3933. 'runtime/html5/runtime',
  3934. 'lib/file'
  3935. ], function( Base, Html5Runtime, File ) {
  3936. return Html5Runtime.register( 'FilePaste', {
  3937. init: function() {
  3938. var opts = this.options,
  3939. elem = this.elem = opts.container,
  3940. accept = '.*',
  3941. arr, i, len, item;
  3942. // accetp的mimeTypes中生成匹配正则。
  3943. if ( opts.accept ) {
  3944. arr = [];
  3945. for ( i = 0, len = opts.accept.length; i < len; i++ ) {
  3946. item = opts.accept[ i ].mimeTypes;
  3947. item && arr.push( item );
  3948. }
  3949. if ( arr.length ) {
  3950. accept = arr.join(',');
  3951. accept = accept.replace( /,/g, '|' ).replace( /\*/g, '.*' );
  3952. }
  3953. }
  3954. this.accept = accept = new RegExp( accept, 'i' );
  3955. this.hander = Base.bindFn( this._pasteHander, this );
  3956. elem.on( 'paste', this.hander );
  3957. },
  3958. _pasteHander: function( e ) {
  3959. var allowed = [],
  3960. ruid = this.getRuid(),
  3961. items, item, blob, i, len;
  3962. e = e.originalEvent || e;
  3963. items = e.clipboardData.items;
  3964. for ( i = 0, len = items.length; i < len; i++ ) {
  3965. item = items[ i ];
  3966. if ( item.kind !== 'file' || !(blob = item.getAsFile()) ) {
  3967. continue;
  3968. }
  3969. allowed.push( new File( ruid, blob ) );
  3970. }
  3971. if ( allowed.length ) {
  3972. // 不阻止非文件粘贴(文字粘贴)的事件冒泡
  3973. e.preventDefault();
  3974. e.stopPropagation();
  3975. this.trigger( 'paste', allowed );
  3976. }
  3977. },
  3978. destroy: function() {
  3979. this.elem.off( 'paste', this.hander );
  3980. }
  3981. });
  3982. });
  3983. /**
  3984. * @fileOverview FilePicker
  3985. */
  3986. define('runtime/html5/filepicker',[
  3987. 'base',
  3988. 'runtime/html5/runtime'
  3989. ], function( Base, Html5Runtime ) {
  3990. var $ = Base.$;
  3991. return Html5Runtime.register( 'FilePicker', {
  3992. init: function() {
  3993. var container = this.getRuntime().getContainer(),
  3994. me = this,
  3995. owner = me.owner,
  3996. opts = me.options,
  3997. label = this.label = $( document.createElement('label') ),
  3998. input = this.input = $( document.createElement('input') ),
  3999. arr, i, len, mouseHandler, changeHandler;
  4000. input.attr( 'type', 'file' );
  4001. input.attr( 'capture', 'camera');
  4002. input.attr( 'name', opts.name );
  4003. input.addClass('webuploader-element-invisible');
  4004. label.on( 'click', function(e) {
  4005. input.trigger('click');
  4006. e.stopPropagation();
  4007. owner.trigger('dialogopen');
  4008. });
  4009. label.css({
  4010. opacity: 0,
  4011. width: '100%',
  4012. height: '100%',
  4013. display: 'block',
  4014. cursor: 'pointer',
  4015. background: '#ffffff'
  4016. });
  4017. if ( opts.multiple ) {
  4018. input.attr( 'multiple', 'multiple' );
  4019. }
  4020. // @todo Firefox不支持单独指定后缀
  4021. if ( opts.accept && opts.accept.length > 0 ) {
  4022. arr = [];
  4023. for ( i = 0, len = opts.accept.length; i < len; i++ ) {
  4024. arr.push( opts.accept[ i ].mimeTypes );
  4025. }
  4026. input.attr( 'accept', arr.join(',') );
  4027. }
  4028. container.append( input );
  4029. container.append( label );
  4030. mouseHandler = function( e ) {
  4031. owner.trigger( e.type );
  4032. };
  4033. changeHandler = function( e ) {
  4034. var clone;
  4035. // 解决chrome 56 第二次打开文件选择器,然后点击取消,依然会触发change事件的问题
  4036. if (e.target.files.length === 0){
  4037. return false;
  4038. }
  4039. // 第一次上传图片后,第二次再点击弹出文件选择器窗,等待
  4040. me.files = e.target.files;
  4041. // reset input
  4042. clone = this.cloneNode( true );
  4043. clone.value = null;
  4044. this.parentNode.replaceChild( clone, this );
  4045. input.off();
  4046. input = $( clone ).on( 'change', changeHandler )
  4047. .on( 'mouseenter mouseleave', mouseHandler );
  4048. owner.trigger('change');
  4049. }
  4050. input.on( 'change', changeHandler);
  4051. label.on( 'mouseenter mouseleave', mouseHandler );
  4052. },
  4053. getFiles: function() {
  4054. return this.files;
  4055. },
  4056. destroy: function() {
  4057. this.input.off();
  4058. this.label.off();
  4059. }
  4060. });
  4061. });
  4062. /**
  4063. * Terms:
  4064. *
  4065. * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
  4066. * @fileOverview Image控件
  4067. */
  4068. define('runtime/html5/util',[
  4069. 'base'
  4070. ], function( Base ) {
  4071. var urlAPI = window.createObjectURL && window ||
  4072. window.URL && URL.revokeObjectURL && URL ||
  4073. window.webkitURL,
  4074. createObjectURL = Base.noop,
  4075. revokeObjectURL = createObjectURL;
  4076. if ( urlAPI ) {
  4077. // 更安全的方式调用,比如android里面就能把context改成其他的对象。
  4078. createObjectURL = function() {
  4079. return urlAPI.createObjectURL.apply( urlAPI, arguments );
  4080. };
  4081. revokeObjectURL = function() {
  4082. return urlAPI.revokeObjectURL.apply( urlAPI, arguments );
  4083. };
  4084. }
  4085. return {
  4086. createObjectURL: createObjectURL,
  4087. revokeObjectURL: revokeObjectURL,
  4088. dataURL2Blob: function( dataURI ) {
  4089. var byteStr, intArray, ab, i, mimetype, parts;
  4090. parts = dataURI.split(',');
  4091. if ( ~parts[ 0 ].indexOf('base64') ) {
  4092. byteStr = atob( parts[ 1 ] );
  4093. } else {
  4094. byteStr = decodeURIComponent( parts[ 1 ] );
  4095. }
  4096. ab = new ArrayBuffer( byteStr.length );
  4097. intArray = new Uint8Array( ab );
  4098. for ( i = 0; i < byteStr.length; i++ ) {
  4099. intArray[ i ] = byteStr.charCodeAt( i );
  4100. }
  4101. mimetype = parts[ 0 ].split(':')[ 1 ].split(';')[ 0 ];
  4102. return this.arrayBufferToBlob( ab, mimetype );
  4103. },
  4104. dataURL2ArrayBuffer: function( dataURI ) {
  4105. var byteStr, intArray, i, parts;
  4106. parts = dataURI.split(',');
  4107. if ( ~parts[ 0 ].indexOf('base64') ) {
  4108. byteStr = atob( parts[ 1 ] );
  4109. } else {
  4110. byteStr = decodeURIComponent( parts[ 1 ] );
  4111. }
  4112. intArray = new Uint8Array( byteStr.length );
  4113. for ( i = 0; i < byteStr.length; i++ ) {
  4114. intArray[ i ] = byteStr.charCodeAt( i );
  4115. }
  4116. return intArray.buffer;
  4117. },
  4118. arrayBufferToBlob: function( buffer, type ) {
  4119. var builder = window.BlobBuilder || window.WebKitBlobBuilder,
  4120. bb;
  4121. // android不支持直接new Blob, 只能借助blobbuilder.
  4122. if ( builder ) {
  4123. bb = new builder();
  4124. bb.append( buffer );
  4125. return bb.getBlob( type );
  4126. }
  4127. return new Blob([ buffer ], type ? { type: type } : {} );
  4128. },
  4129. // 抽出来主要是为了解决android下面canvas.toDataUrl不支持jpeg.
  4130. // 你得到的结果是png.
  4131. canvasToDataUrl: function( canvas, type, quality ) {
  4132. return canvas.toDataURL( type, quality / 100 );
  4133. },
  4134. // imagemeat会复写这个方法,如果用户选择加载那个文件了的话。
  4135. parseMeta: function( blob, callback ) {
  4136. callback( false, {});
  4137. },
  4138. // imagemeat会复写这个方法,如果用户选择加载那个文件了的话。
  4139. updateImageHead: function( data ) {
  4140. return data;
  4141. }
  4142. };
  4143. });
  4144. /**
  4145. * Terms:
  4146. *
  4147. * Uint8Array, FileReader, BlobBuilder, atob, ArrayBuffer
  4148. * @fileOverview Image控件
  4149. */
  4150. define('runtime/html5/imagemeta',[
  4151. 'runtime/html5/util'
  4152. ], function( Util ) {
  4153. var api;
  4154. api = {
  4155. parsers: {
  4156. 0xffe1: []
  4157. },
  4158. maxMetaDataSize: 262144,
  4159. parse: function( blob, cb ) {
  4160. var me = this,
  4161. fr = new FileReader();
  4162. fr.onload = function() {
  4163. cb( false, me._parse( this.result ) );
  4164. fr = fr.onload = fr.onerror = null;
  4165. };
  4166. fr.onerror = function( e ) {
  4167. cb( e.message );
  4168. fr = fr.onload = fr.onerror = null;
  4169. };
  4170. blob = blob.slice( 0, me.maxMetaDataSize );
  4171. fr.readAsArrayBuffer( blob.getSource() );
  4172. },
  4173. _parse: function( buffer, noParse ) {
  4174. if ( buffer.byteLength < 6 ) {
  4175. return;
  4176. }
  4177. var dataview = new DataView( buffer ),
  4178. offset = 2,
  4179. maxOffset = dataview.byteLength - 4,
  4180. headLength = offset,
  4181. ret = {},
  4182. markerBytes, markerLength, parsers, i;
  4183. if ( dataview.getUint16( 0 ) === 0xffd8 ) {
  4184. while ( offset < maxOffset ) {
  4185. markerBytes = dataview.getUint16( offset );
  4186. if ( markerBytes >= 0xffe0 && markerBytes <= 0xffef ||
  4187. markerBytes === 0xfffe ) {
  4188. markerLength = dataview.getUint16( offset + 2 ) + 2;
  4189. if ( offset + markerLength > dataview.byteLength ) {
  4190. break;
  4191. }
  4192. parsers = api.parsers[ markerBytes ];
  4193. if ( !noParse && parsers ) {
  4194. for ( i = 0; i < parsers.length; i += 1 ) {
  4195. parsers[ i ].call( api, dataview, offset,
  4196. markerLength, ret );
  4197. }
  4198. }
  4199. offset += markerLength;
  4200. headLength = offset;
  4201. } else {
  4202. break;
  4203. }
  4204. }
  4205. if ( headLength > 6 ) {
  4206. if ( buffer.slice ) {
  4207. ret.imageHead = buffer.slice( 2, headLength );
  4208. } else {
  4209. // Workaround for IE10, which does not yet
  4210. // support ArrayBuffer.slice:
  4211. ret.imageHead = new Uint8Array( buffer )
  4212. .subarray( 2, headLength );
  4213. }
  4214. }
  4215. }
  4216. return ret;
  4217. },
  4218. updateImageHead: function( buffer, head ) {
  4219. var data = this._parse( buffer, true ),
  4220. buf1, buf2, bodyoffset;
  4221. bodyoffset = 2;
  4222. if ( data.imageHead ) {
  4223. bodyoffset = 2 + data.imageHead.byteLength;
  4224. }
  4225. if ( buffer.slice ) {
  4226. buf2 = buffer.slice( bodyoffset );
  4227. } else {
  4228. buf2 = new Uint8Array( buffer ).subarray( bodyoffset );
  4229. }
  4230. buf1 = new Uint8Array( head.byteLength + 2 + buf2.byteLength );
  4231. buf1[ 0 ] = 0xFF;
  4232. buf1[ 1 ] = 0xD8;
  4233. buf1.set( new Uint8Array( head ), 2 );
  4234. buf1.set( new Uint8Array( buf2 ), head.byteLength + 2 );
  4235. return buf1.buffer;
  4236. }
  4237. };
  4238. Util.parseMeta = function() {
  4239. return api.parse.apply( api, arguments );
  4240. };
  4241. Util.updateImageHead = function() {
  4242. return api.updateImageHead.apply( api, arguments );
  4243. };
  4244. return api;
  4245. });
  4246. /**
  4247. * 代码来自于:https://github.com/blueimp/JavaScript-Load-Image
  4248. * 暂时项目中只用了orientation.
  4249. *
  4250. * 去除了 Exif Sub IFD Pointer, GPS Info IFD Pointer, Exif Thumbnail.
  4251. * @fileOverview EXIF解析
  4252. */
  4253. // Sample
  4254. // ====================================
  4255. // Make : Apple
  4256. // Model : iPhone 4S
  4257. // Orientation : 1
  4258. // XResolution : 72 [72/1]
  4259. // YResolution : 72 [72/1]
  4260. // ResolutionUnit : 2
  4261. // Software : QuickTime 7.7.1
  4262. // DateTime : 2013:09:01 22:53:55
  4263. // ExifIFDPointer : 190
  4264. // ExposureTime : 0.058823529411764705 [1/17]
  4265. // FNumber : 2.4 [12/5]
  4266. // ExposureProgram : Normal program
  4267. // ISOSpeedRatings : 800
  4268. // ExifVersion : 0220
  4269. // DateTimeOriginal : 2013:09:01 22:52:51
  4270. // DateTimeDigitized : 2013:09:01 22:52:51
  4271. // ComponentsConfiguration : YCbCr
  4272. // ShutterSpeedValue : 4.058893515764426
  4273. // ApertureValue : 2.5260688216892597 [4845/1918]
  4274. // BrightnessValue : -0.3126686601998395
  4275. // MeteringMode : Pattern
  4276. // Flash : Flash did not fire, compulsory flash mode
  4277. // FocalLength : 4.28 [107/25]
  4278. // SubjectArea : [4 values]
  4279. // FlashpixVersion : 0100
  4280. // ColorSpace : 1
  4281. // PixelXDimension : 2448
  4282. // PixelYDimension : 3264
  4283. // SensingMethod : One-chip color area sensor
  4284. // ExposureMode : 0
  4285. // WhiteBalance : Auto white balance
  4286. // FocalLengthIn35mmFilm : 35
  4287. // SceneCaptureType : Standard
  4288. define('runtime/html5/imagemeta/exif',[
  4289. 'base',
  4290. 'runtime/html5/imagemeta'
  4291. ], function( Base, ImageMeta ) {
  4292. var EXIF = {};
  4293. EXIF.ExifMap = function() {
  4294. return this;
  4295. };
  4296. EXIF.ExifMap.prototype.map = {
  4297. 'Orientation': 0x0112
  4298. };
  4299. EXIF.ExifMap.prototype.get = function( id ) {
  4300. return this[ id ] || this[ this.map[ id ] ];
  4301. };
  4302. EXIF.exifTagTypes = {
  4303. // byte, 8-bit unsigned int:
  4304. 1: {
  4305. getValue: function( dataView, dataOffset ) {
  4306. return dataView.getUint8( dataOffset );
  4307. },
  4308. size: 1
  4309. },
  4310. // ascii, 8-bit byte:
  4311. 2: {
  4312. getValue: function( dataView, dataOffset ) {
  4313. return String.fromCharCode( dataView.getUint8( dataOffset ) );
  4314. },
  4315. size: 1,
  4316. ascii: true
  4317. },
  4318. // short, 16 bit int:
  4319. 3: {
  4320. getValue: function( dataView, dataOffset, littleEndian ) {
  4321. return dataView.getUint16( dataOffset, littleEndian );
  4322. },
  4323. size: 2
  4324. },
  4325. // long, 32 bit int:
  4326. 4: {
  4327. getValue: function( dataView, dataOffset, littleEndian ) {
  4328. return dataView.getUint32( dataOffset, littleEndian );
  4329. },
  4330. size: 4
  4331. },
  4332. // rational = two long values,
  4333. // first is numerator, second is denominator:
  4334. 5: {
  4335. getValue: function( dataView, dataOffset, littleEndian ) {
  4336. return dataView.getUint32( dataOffset, littleEndian ) /
  4337. dataView.getUint32( dataOffset + 4, littleEndian );
  4338. },
  4339. size: 8
  4340. },
  4341. // slong, 32 bit signed int:
  4342. 9: {
  4343. getValue: function( dataView, dataOffset, littleEndian ) {
  4344. return dataView.getInt32( dataOffset, littleEndian );
  4345. },
  4346. size: 4
  4347. },
  4348. // srational, two slongs, first is numerator, second is denominator:
  4349. 10: {
  4350. getValue: function( dataView, dataOffset, littleEndian ) {
  4351. return dataView.getInt32( dataOffset, littleEndian ) /
  4352. dataView.getInt32( dataOffset + 4, littleEndian );
  4353. },
  4354. size: 8
  4355. }
  4356. };
  4357. // undefined, 8-bit byte, value depending on field:
  4358. EXIF.exifTagTypes[ 7 ] = EXIF.exifTagTypes[ 1 ];
  4359. EXIF.getExifValue = function( dataView, tiffOffset, offset, type, length,
  4360. littleEndian ) {
  4361. var tagType = EXIF.exifTagTypes[ type ],
  4362. tagSize, dataOffset, values, i, str, c;
  4363. if ( !tagType ) {
  4364. Base.log('Invalid Exif data: Invalid tag type.');
  4365. return;
  4366. }
  4367. tagSize = tagType.size * length;
  4368. // Determine if the value is contained in the dataOffset bytes,
  4369. // or if the value at the dataOffset is a pointer to the actual data:
  4370. dataOffset = tagSize > 4 ? tiffOffset + dataView.getUint32( offset + 8,
  4371. littleEndian ) : (offset + 8);
  4372. if ( dataOffset + tagSize > dataView.byteLength ) {
  4373. Base.log('Invalid Exif data: Invalid data offset.');
  4374. return;
  4375. }
  4376. if ( length === 1 ) {
  4377. return tagType.getValue( dataView, dataOffset, littleEndian );
  4378. }
  4379. values = [];
  4380. for ( i = 0; i < length; i += 1 ) {
  4381. values[ i ] = tagType.getValue( dataView,
  4382. dataOffset + i * tagType.size, littleEndian );
  4383. }
  4384. if ( tagType.ascii ) {
  4385. str = '';
  4386. // Concatenate the chars:
  4387. for ( i = 0; i < values.length; i += 1 ) {
  4388. c = values[ i ];
  4389. // Ignore the terminating NULL byte(s):
  4390. if ( c === '\u0000' ) {
  4391. break;
  4392. }
  4393. str += c;
  4394. }
  4395. return str;
  4396. }
  4397. return values;
  4398. };
  4399. EXIF.parseExifTag = function( dataView, tiffOffset, offset, littleEndian,
  4400. data ) {
  4401. var tag = dataView.getUint16( offset, littleEndian );
  4402. data.exif[ tag ] = EXIF.getExifValue( dataView, tiffOffset, offset,
  4403. dataView.getUint16( offset + 2, littleEndian ), // tag type
  4404. dataView.getUint32( offset + 4, littleEndian ), // tag length
  4405. littleEndian );
  4406. };
  4407. EXIF.parseExifTags = function( dataView, tiffOffset, dirOffset,
  4408. littleEndian, data ) {
  4409. var tagsNumber, dirEndOffset, i;
  4410. if ( dirOffset + 6 > dataView.byteLength ) {
  4411. Base.log('Invalid Exif data: Invalid directory offset.');
  4412. return;
  4413. }
  4414. tagsNumber = dataView.getUint16( dirOffset, littleEndian );
  4415. dirEndOffset = dirOffset + 2 + 12 * tagsNumber;
  4416. if ( dirEndOffset + 4 > dataView.byteLength ) {
  4417. Base.log('Invalid Exif data: Invalid directory size.');
  4418. return;
  4419. }
  4420. for ( i = 0; i < tagsNumber; i += 1 ) {
  4421. this.parseExifTag( dataView, tiffOffset,
  4422. dirOffset + 2 + 12 * i, // tag offset
  4423. littleEndian, data );
  4424. }
  4425. // Return the offset to the next directory:
  4426. return dataView.getUint32( dirEndOffset, littleEndian );
  4427. };
  4428. // EXIF.getExifThumbnail = function(dataView, offset, length) {
  4429. // var hexData,
  4430. // i,
  4431. // b;
  4432. // if (!length || offset + length > dataView.byteLength) {
  4433. // Base.log('Invalid Exif data: Invalid thumbnail data.');
  4434. // return;
  4435. // }
  4436. // hexData = [];
  4437. // for (i = 0; i < length; i += 1) {
  4438. // b = dataView.getUint8(offset + i);
  4439. // hexData.push((b < 16 ? '0' : '') + b.toString(16));
  4440. // }
  4441. // return 'data:image/jpeg,%' + hexData.join('%');
  4442. // };
  4443. EXIF.parseExifData = function( dataView, offset, length, data ) {
  4444. var tiffOffset = offset + 10,
  4445. littleEndian, dirOffset;
  4446. // Check for the ASCII code for "Exif" (0x45786966):
  4447. if ( dataView.getUint32( offset + 4 ) !== 0x45786966 ) {
  4448. // No Exif data, might be XMP data instead
  4449. return;
  4450. }
  4451. if ( tiffOffset + 8 > dataView.byteLength ) {
  4452. Base.log('Invalid Exif data: Invalid segment size.');
  4453. return;
  4454. }
  4455. // Check for the two null bytes:
  4456. if ( dataView.getUint16( offset + 8 ) !== 0x0000 ) {
  4457. Base.log('Invalid Exif data: Missing byte alignment offset.');
  4458. return;
  4459. }
  4460. // Check the byte alignment:
  4461. switch ( dataView.getUint16( tiffOffset ) ) {
  4462. case 0x4949:
  4463. littleEndian = true;
  4464. break;
  4465. case 0x4D4D:
  4466. littleEndian = false;
  4467. break;
  4468. default:
  4469. Base.log('Invalid Exif data: Invalid byte alignment marker.');
  4470. return;
  4471. }
  4472. // Check for the TIFF tag marker (0x002A):
  4473. if ( dataView.getUint16( tiffOffset + 2, littleEndian ) !== 0x002A ) {
  4474. Base.log('Invalid Exif data: Missing TIFF marker.');
  4475. return;
  4476. }
  4477. // Retrieve the directory offset bytes, usually 0x00000008 or 8 decimal:
  4478. dirOffset = dataView.getUint32( tiffOffset + 4, littleEndian );
  4479. // Create the exif object to store the tags:
  4480. data.exif = new EXIF.ExifMap();
  4481. // Parse the tags of the main image directory and retrieve the
  4482. // offset to the next directory, usually the thumbnail directory:
  4483. dirOffset = EXIF.parseExifTags( dataView, tiffOffset,
  4484. tiffOffset + dirOffset, littleEndian, data );
  4485. // 尝试读取缩略图
  4486. // if ( dirOffset ) {
  4487. // thumbnailData = {exif: {}};
  4488. // dirOffset = EXIF.parseExifTags(
  4489. // dataView,
  4490. // tiffOffset,
  4491. // tiffOffset + dirOffset,
  4492. // littleEndian,
  4493. // thumbnailData
  4494. // );
  4495. // // Check for JPEG Thumbnail offset:
  4496. // if (thumbnailData.exif[0x0201]) {
  4497. // data.exif.Thumbnail = EXIF.getExifThumbnail(
  4498. // dataView,
  4499. // tiffOffset + thumbnailData.exif[0x0201],
  4500. // thumbnailData.exif[0x0202] // Thumbnail data length
  4501. // );
  4502. // }
  4503. // }
  4504. };
  4505. ImageMeta.parsers[ 0xffe1 ].push( EXIF.parseExifData );
  4506. return EXIF;
  4507. });
  4508. /**
  4509. * @fileOverview Image
  4510. */
  4511. define('runtime/html5/image',[
  4512. 'base',
  4513. 'runtime/html5/runtime',
  4514. 'runtime/html5/util'
  4515. ], function( Base, Html5Runtime, Util ) {
  4516. var BLANK = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
  4517. return Html5Runtime.register( 'Image', {
  4518. // flag: 标记是否被修改过。
  4519. modified: false,
  4520. init: function() {
  4521. var me = this,
  4522. img = new Image();
  4523. img.onload = function() {
  4524. me._info = {
  4525. type: me.type,
  4526. width: this.width,
  4527. height: this.height
  4528. };
  4529. //debugger;
  4530. // 读取meta信息。
  4531. if ( !me._metas && 'image/jpeg' === me.type ) {
  4532. Util.parseMeta( me._blob, function( error, ret ) {
  4533. me._metas = ret;
  4534. me.owner.trigger('load');
  4535. });
  4536. } else {
  4537. me.owner.trigger('load');
  4538. }
  4539. };
  4540. img.onerror = function() {
  4541. me.owner.trigger('error');
  4542. };
  4543. me._img = img;
  4544. },
  4545. loadFromBlob: function( blob ) {
  4546. var me = this,
  4547. img = me._img;
  4548. me._blob = blob;
  4549. me.type = blob.type;
  4550. img.src = Util.createObjectURL( blob.getSource() );
  4551. me.owner.once( 'load', function() {
  4552. Util.revokeObjectURL( img.src );
  4553. });
  4554. },
  4555. resize: function( width, height ) {
  4556. var canvas = this._canvas ||
  4557. (this._canvas = document.createElement('canvas'));
  4558. this._resize( this._img, canvas, width, height );
  4559. this._blob = null; // 没用了,可以删掉了。
  4560. this.modified = true;
  4561. this.owner.trigger( 'complete', 'resize' );
  4562. },
  4563. crop: function( x, y, w, h, s ) {
  4564. var cvs = this._canvas ||
  4565. (this._canvas = document.createElement('canvas')),
  4566. opts = this.options,
  4567. img = this._img,
  4568. iw = img.naturalWidth,
  4569. ih = img.naturalHeight,
  4570. orientation = this.getOrientation();
  4571. s = s || 1;
  4572. // todo 解决 orientation 的问题。
  4573. // values that require 90 degree rotation
  4574. // if ( ~[ 5, 6, 7, 8 ].indexOf( orientation ) ) {
  4575. // switch ( orientation ) {
  4576. // case 6:
  4577. // tmp = x;
  4578. // x = y;
  4579. // y = iw * s - tmp - w;
  4580. // console.log(ih * s, tmp, w)
  4581. // break;
  4582. // }
  4583. // (w ^= h, h ^= w, w ^= h);
  4584. // }
  4585. cvs.width = w;
  4586. cvs.height = h;
  4587. opts.preserveHeaders || this._rotate2Orientaion( cvs, orientation );
  4588. this._renderImageToCanvas( cvs, img, -x, -y, iw * s, ih * s );
  4589. this._blob = null; // 没用了,可以删掉了。
  4590. this.modified = true;
  4591. this.owner.trigger( 'complete', 'crop' );
  4592. },
  4593. getAsBlob: function( type ) {
  4594. var blob = this._blob,
  4595. opts = this.options,
  4596. canvas;
  4597. type = type || this.type;
  4598. // blob需要重新生成。
  4599. if ( this.modified || this.type !== type ) {
  4600. canvas = this._canvas;
  4601. if ( type === 'image/jpeg' ) {
  4602. blob = Util.canvasToDataUrl( canvas, type, opts.quality );
  4603. if ( opts.preserveHeaders && this._metas &&
  4604. this._metas.imageHead ) {
  4605. blob = Util.dataURL2ArrayBuffer( blob );
  4606. blob = Util.updateImageHead( blob,
  4607. this._metas.imageHead );
  4608. blob = Util.arrayBufferToBlob( blob, type );
  4609. return blob;
  4610. }
  4611. } else {
  4612. blob = Util.canvasToDataUrl( canvas, type );
  4613. }
  4614. blob = Util.dataURL2Blob( blob );
  4615. }
  4616. return blob;
  4617. },
  4618. getAsDataUrl: function( type ) {
  4619. var opts = this.options;
  4620. type = type || this.type;
  4621. if ( type === 'image/jpeg' ) {
  4622. return Util.canvasToDataUrl( this._canvas, type, opts.quality );
  4623. } else {
  4624. return this._canvas.toDataURL( type );
  4625. }
  4626. },
  4627. getOrientation: function() {
  4628. return this._metas && this._metas.exif &&
  4629. this._metas.exif.get('Orientation') || 1;
  4630. },
  4631. info: function( val ) {
  4632. // setter
  4633. if ( val ) {
  4634. this._info = val;
  4635. return this;
  4636. }
  4637. // getter
  4638. return this._info;
  4639. },
  4640. meta: function( val ) {
  4641. // setter
  4642. if ( val ) {
  4643. this._metas = val;
  4644. return this;
  4645. }
  4646. // getter
  4647. return this._metas;
  4648. },
  4649. destroy: function() {
  4650. var canvas = this._canvas;
  4651. this._img.onload = null;
  4652. if ( canvas ) {
  4653. canvas.getContext('2d')
  4654. .clearRect( 0, 0, canvas.width, canvas.height );
  4655. canvas.width = canvas.height = 0;
  4656. this._canvas = null;
  4657. }
  4658. // 释放内存。非常重要,否则释放不了image的内存。
  4659. this._img.src = BLANK;
  4660. this._img = this._blob = null;
  4661. },
  4662. _resize: function( img, cvs, width, height ) {
  4663. var opts = this.options,
  4664. naturalWidth = img.width,
  4665. naturalHeight = img.height,
  4666. orientation = this.getOrientation(),
  4667. scale, w, h, x, y;
  4668. // values that require 90 degree rotation
  4669. if ( ~[ 5, 6, 7, 8 ].indexOf( orientation ) ) {
  4670. // 交换width, height的值。
  4671. width ^= height;
  4672. height ^= width;
  4673. width ^= height;
  4674. }
  4675. scale = Math[ opts.crop ? 'max' : 'min' ]( width / naturalWidth,
  4676. height / naturalHeight );
  4677. // 不允许放大。
  4678. opts.allowMagnify || (scale = Math.min( 1, scale ));
  4679. w = naturalWidth * scale;
  4680. h = naturalHeight * scale;
  4681. if ( opts.crop ) {
  4682. cvs.width = width;
  4683. cvs.height = height;
  4684. } else {
  4685. cvs.width = w;
  4686. cvs.height = h;
  4687. }
  4688. x = (cvs.width - w) / 2;
  4689. y = (cvs.height - h) / 2;
  4690. opts.preserveHeaders || this._rotate2Orientaion( cvs, orientation );
  4691. this._renderImageToCanvas( cvs, img, x, y, w, h );
  4692. },
  4693. _rotate2Orientaion: function( canvas, orientation ) {
  4694. var width = canvas.width,
  4695. height = canvas.height,
  4696. ctx = canvas.getContext('2d');
  4697. switch ( orientation ) {
  4698. case 5:
  4699. case 6:
  4700. case 7:
  4701. case 8:
  4702. canvas.width = height;
  4703. canvas.height = width;
  4704. break;
  4705. }
  4706. switch ( orientation ) {
  4707. case 2: // horizontal flip
  4708. ctx.translate( width, 0 );
  4709. ctx.scale( -1, 1 );
  4710. break;
  4711. case 3: // 180 rotate left
  4712. ctx.translate( width, height );
  4713. ctx.rotate( Math.PI );
  4714. break;
  4715. case 4: // vertical flip
  4716. ctx.translate( 0, height );
  4717. ctx.scale( 1, -1 );
  4718. break;
  4719. case 5: // vertical flip + 90 rotate right
  4720. ctx.rotate( 0.5 * Math.PI );
  4721. ctx.scale( 1, -1 );
  4722. break;
  4723. case 6: // 90 rotate right
  4724. ctx.rotate( 0.5 * Math.PI );
  4725. ctx.translate( 0, -height );
  4726. break;
  4727. case 7: // horizontal flip + 90 rotate right
  4728. ctx.rotate( 0.5 * Math.PI );
  4729. ctx.translate( width, -height );
  4730. ctx.scale( -1, 1 );
  4731. break;
  4732. case 8: // 90 rotate left
  4733. ctx.rotate( -0.5 * Math.PI );
  4734. ctx.translate( -width, 0 );
  4735. break;
  4736. }
  4737. },
  4738. // https://github.com/stomita/ios-imagefile-megapixel/
  4739. // blob/master/src/megapix-image.js
  4740. _renderImageToCanvas: (function() {
  4741. // 如果不是ios, 不需要这么复杂!
  4742. if ( !Base.os.ios ) {
  4743. return function( canvas ) {
  4744. var args = Base.slice( arguments, 1 ),
  4745. ctx = canvas.getContext('2d');
  4746. ctx.drawImage.apply( ctx, args );
  4747. };
  4748. }
  4749. /**
  4750. * Detecting vertical squash in loaded image.
  4751. * Fixes a bug which squash image vertically while drawing into
  4752. * canvas for some images.
  4753. */
  4754. function detectVerticalSquash( img, iw, ih ) {
  4755. var canvas = document.createElement('canvas'),
  4756. ctx = canvas.getContext('2d'),
  4757. sy = 0,
  4758. ey = ih,
  4759. py = ih,
  4760. data, alpha, ratio;
  4761. canvas.width = 1;
  4762. canvas.height = ih;
  4763. ctx.drawImage( img, 0, 0 );
  4764. data = ctx.getImageData( 0, 0, 1, ih ).data;
  4765. // search image edge pixel position in case
  4766. // it is squashed vertically.
  4767. while ( py > sy ) {
  4768. alpha = data[ (py - 1) * 4 + 3 ];
  4769. if ( alpha === 0 ) {
  4770. ey = py;
  4771. } else {
  4772. sy = py;
  4773. }
  4774. py = (ey + sy) >> 1;
  4775. }
  4776. ratio = (py / ih);
  4777. return (ratio === 0) ? 1 : ratio;
  4778. }
  4779. // fix ie7 bug
  4780. // http://stackoverflow.com/questions/11929099/
  4781. // html5-canvas-drawimage-ratio-bug-ios
  4782. if ( Base.os.ios >= 7 ) {
  4783. return function( canvas, img, x, y, w, h ) {
  4784. var iw = img.naturalWidth,
  4785. ih = img.naturalHeight,
  4786. vertSquashRatio = detectVerticalSquash( img, iw, ih );
  4787. return canvas.getContext('2d').drawImage( img, 0, 0,
  4788. iw * vertSquashRatio, ih * vertSquashRatio,
  4789. x, y, w, h );
  4790. };
  4791. }
  4792. /**
  4793. * Detect subsampling in loaded image.
  4794. * In iOS, larger images than 2M pixels may be
  4795. * subsampled in rendering.
  4796. */
  4797. function detectSubsampling( img ) {
  4798. var iw = img.naturalWidth,
  4799. ih = img.naturalHeight,
  4800. canvas, ctx;
  4801. // subsampling may happen overmegapixel image
  4802. if ( iw * ih > 1024 * 1024 ) {
  4803. canvas = document.createElement('canvas');
  4804. canvas.width = canvas.height = 1;
  4805. ctx = canvas.getContext('2d');
  4806. ctx.drawImage( img, -iw + 1, 0 );
  4807. // subsampled image becomes half smaller in rendering size.
  4808. // check alpha channel value to confirm image is covering
  4809. // edge pixel or not. if alpha value is 0
  4810. // image is not covering, hence subsampled.
  4811. return ctx.getImageData( 0, 0, 1, 1 ).data[ 3 ] === 0;
  4812. } else {
  4813. return false;
  4814. }
  4815. }
  4816. return function( canvas, img, x, y, width, height ) {
  4817. var iw = img.naturalWidth,
  4818. ih = img.naturalHeight,
  4819. ctx = canvas.getContext('2d'),
  4820. subsampled = detectSubsampling( img ),
  4821. doSquash = this.type === 'image/jpeg',
  4822. d = 1024,
  4823. sy = 0,
  4824. dy = 0,
  4825. tmpCanvas, tmpCtx, vertSquashRatio, dw, dh, sx, dx;
  4826. if ( subsampled ) {
  4827. iw /= 2;
  4828. ih /= 2;
  4829. }
  4830. ctx.save();
  4831. tmpCanvas = document.createElement('canvas');
  4832. tmpCanvas.width = tmpCanvas.height = d;
  4833. tmpCtx = tmpCanvas.getContext('2d');
  4834. vertSquashRatio = doSquash ?
  4835. detectVerticalSquash( img, iw, ih ) : 1;
  4836. dw = Math.ceil( d * width / iw );
  4837. dh = Math.ceil( d * height / ih / vertSquashRatio );
  4838. while ( sy < ih ) {
  4839. sx = 0;
  4840. dx = 0;
  4841. while ( sx < iw ) {
  4842. tmpCtx.clearRect( 0, 0, d, d );
  4843. tmpCtx.drawImage( img, -sx, -sy );
  4844. ctx.drawImage( tmpCanvas, 0, 0, d, d,
  4845. x + dx, y + dy, dw, dh );
  4846. sx += d;
  4847. dx += dw;
  4848. }
  4849. sy += d;
  4850. dy += dh;
  4851. }
  4852. ctx.restore();
  4853. tmpCanvas = tmpCtx = null;
  4854. };
  4855. })()
  4856. });
  4857. });
  4858. /**
  4859. * @fileOverview Transport
  4860. * @todo 支持chunked传输,优势:
  4861. * 可以将大文件分成小块,挨个传输,可以提高大文件成功率,当失败的时候,也只需要重传那小部分,
  4862. * 而不需要重头再传一次。另外断点续传也需要用chunked方式。
  4863. */
  4864. define('runtime/html5/transport',[
  4865. 'base',
  4866. 'runtime/html5/runtime'
  4867. ], function( Base, Html5Runtime ) {
  4868. var noop = Base.noop,
  4869. $ = Base.$;
  4870. return Html5Runtime.register( 'Transport', {
  4871. init: function() {
  4872. this._status = 0;
  4873. this._response = null;
  4874. },
  4875. send: function() {
  4876. var owner = this.owner,
  4877. opts = this.options,
  4878. xhr = this._initAjax(),
  4879. blob = owner._blob,
  4880. server = opts.server,
  4881. formData, binary, fr;
  4882. if ( opts.sendAsBinary ) {
  4883. server += opts.attachInfoToQuery !== false ? ((/\?/.test( server ) ? '&' : '?') +
  4884. $.param( owner._formData )) : '';
  4885. binary = blob.getSource();
  4886. } else {
  4887. formData = new FormData();
  4888. $.each( owner._formData, function( k, v ) {
  4889. formData.append( k, v );
  4890. });
  4891. formData.append( opts.fileVal, blob.getSource(),
  4892. opts.filename || owner._formData.name || '' );
  4893. }
  4894. if ( opts.withCredentials && 'withCredentials' in xhr ) {
  4895. xhr.open( opts.method, server, true );
  4896. xhr.withCredentials = true;
  4897. } else {
  4898. xhr.open( opts.method, server );
  4899. }
  4900. this._setRequestHeader( xhr, opts.headers );
  4901. if ( binary ) {
  4902. // 强制设置成 content-type 为文件流。
  4903. xhr.overrideMimeType &&
  4904. xhr.overrideMimeType('application/octet-stream');
  4905. // android直接发送blob会导致服务端接收到的是空文件。
  4906. // bug详情。
  4907. // https://code.google.com/p/android/issues/detail?id=39882
  4908. // 所以先用fileReader读取出来再通过arraybuffer的方式发送。
  4909. if ( Base.os.android ) {
  4910. fr = new FileReader();
  4911. fr.onload = function() {
  4912. xhr.send( this.result );
  4913. fr = fr.onload = null;
  4914. };
  4915. fr.readAsArrayBuffer( binary );
  4916. } else {
  4917. xhr.send( binary );
  4918. }
  4919. } else {
  4920. xhr.send( formData );
  4921. }
  4922. },
  4923. getResponse: function() {
  4924. return this._response;
  4925. },
  4926. getResponseAsJson: function() {
  4927. return this._parseJson( this._response );
  4928. },
  4929. getResponseHeaders: function() {
  4930. return this._headers;
  4931. },
  4932. getStatus: function() {
  4933. return this._status;
  4934. },
  4935. abort: function() {
  4936. var xhr = this._xhr;
  4937. if ( xhr ) {
  4938. xhr.upload.onprogress = noop;
  4939. xhr.onreadystatechange = noop;
  4940. xhr.abort();
  4941. this._xhr = xhr = null;
  4942. }
  4943. },
  4944. destroy: function() {
  4945. this.abort();
  4946. },
  4947. _parseHeader: function(raw) {
  4948. var ret = {};
  4949. raw && raw.replace(/^([^\:]+):(.*)$/mg, function(_, key, value) {
  4950. ret[key.trim()] = value.trim();
  4951. });
  4952. return ret;
  4953. },
  4954. _initAjax: function() {
  4955. var me = this,
  4956. xhr = new XMLHttpRequest(),
  4957. opts = this.options;
  4958. if ( opts.withCredentials && !('withCredentials' in xhr) &&
  4959. typeof XDomainRequest !== 'undefined' ) {
  4960. xhr = new XDomainRequest();
  4961. }
  4962. xhr.upload.onprogress = function( e ) {
  4963. var percentage = 0;
  4964. if ( e.lengthComputable ) {
  4965. percentage = e.loaded / e.total;
  4966. }
  4967. return me.trigger( 'progress', percentage );
  4968. };
  4969. xhr.onreadystatechange = function() {
  4970. if ( xhr.readyState !== 4 ) {
  4971. return;
  4972. }
  4973. xhr.upload.onprogress = noop;
  4974. xhr.onreadystatechange = noop;
  4975. me._xhr = null;
  4976. me._status = xhr.status;
  4977. var separator = '|', // 分隔符
  4978. // 拼接的状态,在 widgets/upload.js 会有代码用到这个分隔符
  4979. status = separator + xhr.status +
  4980. separator + xhr.statusText;
  4981. if ( xhr.status >= 200 && xhr.status < 300 ) {
  4982. me._response = xhr.responseText;
  4983. me._headers = me._parseHeader(xhr.getAllResponseHeaders());
  4984. return me.trigger('load');
  4985. } else if ( xhr.status >= 500 && xhr.status < 600 ) {
  4986. me._response = xhr.responseText;
  4987. me._headers = me._parseHeader(xhr.getAllResponseHeaders());
  4988. return me.trigger( 'error', 'server' + status );
  4989. }
  4990. return me.trigger( 'error', me._status ? 'http' + status : 'abort' );
  4991. };
  4992. me._xhr = xhr;
  4993. return xhr;
  4994. },
  4995. _setRequestHeader: function( xhr, headers ) {
  4996. $.each( headers, function( key, val ) {
  4997. xhr.setRequestHeader( key, val );
  4998. });
  4999. },
  5000. _parseJson: function( str ) {
  5001. var json;
  5002. try {
  5003. json = JSON.parse( str );
  5004. } catch ( ex ) {
  5005. json = {};
  5006. }
  5007. return json;
  5008. }
  5009. });
  5010. });
  5011. /**
  5012. * @fileOverview 只有html5实现的文件版本。
  5013. */
  5014. define('preset/html5only',[
  5015. 'base',
  5016. // widgets
  5017. 'widgets/filednd',
  5018. 'widgets/filepaste',
  5019. 'widgets/filepicker',
  5020. 'widgets/image',
  5021. 'widgets/queue',
  5022. 'widgets/runtime',
  5023. 'widgets/upload',
  5024. 'widgets/validator',
  5025. // runtimes
  5026. // html5
  5027. 'runtime/html5/blob',
  5028. 'runtime/html5/dnd',
  5029. 'runtime/html5/filepaste',
  5030. 'runtime/html5/filepicker',
  5031. 'runtime/html5/imagemeta/exif',
  5032. 'runtime/html5/image',
  5033. 'runtime/html5/transport'
  5034. ], function( Base ) {
  5035. return Base;
  5036. });
  5037. define('webuploader',[
  5038. 'preset/html5only'
  5039. ], function( preset ) {
  5040. return preset;
  5041. });
  5042. return require('webuploader');
  5043. });