如题所述
ææ件ä»æ¡é¢ææ½å°æµè§å¨æ¯Webåºç¨ç¨åºéæçæç»ç®æ ä¹ä¸ãæ¬æç¨å
±åç¯æç« (æ¬ææ¯ç¬¬ä¸ç¯)ï¼ä¸»è¦ä»ç»äºï¼
1.å®ç°å°æ件ææ¾å°é¡µé¢å ç´ ä¸
2.å¨JavaScriptä¸åæ被ææ¾çæ件
3.å¨å®¢æ·ç«¯ä¸å è½½å解ææ件
4.使ç¨XMLHttpRequest2å°æ件å¼æ¥ä¸ä¼ å°æå¡å¨
5.ä¸ä¼ æ¶ï¼æ¾ç¤ºå¾å½¢è¿åº¦æ¡
6.使ç¨è¿ç¨å¢å¼º( progressive enhancement)以确ä¿æ件ä¸ä¼ 表åå¨æææµè§å¨æ£å¸¸å·¥ä½
7.纯JavaScript代ç ï¼ä¸ä½¿ç¨å ¶å®åºã
å»ï¼å¼å§å§ï¼
ç³ç³çæµè§å¨æ¯æ
å¨å¼å§ä¹å说æä¸ä¸ï¼è¿ä¸ªæç¨ä½¿ç¨äºä¸äºHTML5çææ°ææ¯ï¼å¯è½ä»¥åä¼è¢«ä¿®æ£ãç®å代ç å¯ä»¥æ£å¸¸å·¥ä½ï¼ä½æ¯å¾å¯è½éçAPIçååæè æµè§å¨å级èåå°å½±åã
§FirefoxåChromeçææ°çæ¬æ¯æææçåè½å¹¶ä¸å¯ä»¥å®ç¾è¿è¡ã
§Operaå¯ä»¥ç¨JavaScript解ææ件ï¼ä½æªå®ç°ææ¾æ件åXMLHttpRequest2ä¸ä¼ ã
§IEæµè§å¨åæ¡é¢çæ¬çSafariä¸æ¯æææçAPIã
§è¹æå·²ç¦ç¨Safariæµè§å¨çiPhoneåiPadçæ¬çHTMLæ件ä¸ä¼ 表åãæè°ç¥é为ä»ä¹åï¼
æåï¼è¯·æ³¨ææç代ç åªæ¯æ¼ç¤ºäºåºæ¬æ¦å¿µï¼å ä¹æ²¡æé误æ£æ¥ï¼å æ¤éè¦è¿è¡ä¿®æ¹ä»¥éåºä½ çå·¥ä½éè¦ã
HTMLåCSS
è¿æ¯æ们ç带ææ件è¾å ¥ç±»åçæ å表åãå¯ä¸çHTML5ç¹æ§æ¯âmultipleâå±æ§ï¼å®å 许ç¨æ·éæ©ä»»ææ°éçæ件ã
æ们å°ä¸ä¼ æ件å°è¿è¡PHPçæå¡å¨ä¸ï¼ä½æ¯æ è®ºä½ å¨æå¡å¨ç«¯ä½¿ç¨ä»ä¹ææ¯ï¼ä»£ç æ¯å¤§è´ç¸åçãéèçMAX_FILE_SIZEå¼æå®ä¸º300,000个åèï¼è¿æ¯PHP使ç¨çï¼ä½æ们è¿ä¼å¨æµè§å¨ç«¯ç¨å®è¿è¡æ£æ¥ï¼ä»¥é²æ¢å¤§æ件ä¸ä¼ ã
#filedragå ç´ å°è¢«ç¨ä½æ¥æ¶ææ¾æ件çä½ç½®ãå ç´ æ¯éè¿CSSéèçï¼ä½å¦ææµè§å¨æ¯æææ½çè¯ï¼å®ä¼å¨JavaScriptä¸è¢«æ¾ç¤ºï¼
æ们è¿å®ä¹äºä¸ä¸ª.hoverç±»ï¼å½ç¨æ·æå¨æ件å°ç¸åºåºåå ç´ æ¶ï¼æ¹åå ç´ çæ¾ç¤ºé£æ ¼ãæµè§å¨ä¸æ¯æå¨é£ç§æ åµä¸ç:hoveré£æ ¼ï¼ä½å½äºä»¶è§¦åæ¶ï¼æ们å¯ä»¥ç¨JavaScriptæ·»å ç±»ã
æ件æä½API
W3C æ件æä½API
æä¾äºä¸äºå¯¹è±¡ï¼æ们使ç¨äºï¼
§FileListï¼ä»£è¡¨éå®çæ件æ°ç»ã
§Fileï¼ä»£è¡¨ä¸ä¸ªåç¬çæ件ã
§FileReaderï¼æ¯æJavaScriptç客æ·ç«¯è¯»åæ件æ°æ®çæ¥å£ã
Javascriptäºä»¶
æ¯æ¶åå¤çJavaScript代ç äºãæ们ä¸ä½¿ç¨ä»»ä½JavaScriptåºï¼ä¸ºäºèçæ¶é´ï¼æ们å°å建ä¸ä¸ªè¾ å©å½æ°è¿åå ç´ çIDåè¾åºç¶ææ¶æ¯ï¼
æ们å°å¨Init()å½æ°éæ£æ¥æ件æä½APIæ¯å¦ææ:
Init()å½æ°è¯´æ:
1.ç»æ件è¾å ¥å ç´ è®¾ç½®ä¸ä¸ªâchangeâäºä»¶çå¬å¨ã
2.æ¾ç¤º#filedragå ç´ ã
3.设置âdragoverâåâdragleaveâäºä»¶çå¬å¨ï¼ä»¥æ¹åçï¼filedragå ç´ çé£æ ¼ã
4.ç»#filedragå ç´ è®¾ç½®ä¸ä¸ªâdropâçäºä»¶çå¬å¨ã
5.éè表åçæ交æé® - å®ä¸æ¯å¿ éçï¼å 为å½æ件被éä¸æ¶æ们å°è¿è¡åæåä¸ä¼ ï¼èä¸æ¯æ交表åã
æè ï¼å½æµè§å¨æ¯ææ件æå¨æ¶ï¼ä½ å¯ä»¥éèæ件è¾å ¥å ç´ ã就个人èè¨ï¼ææ´æ¿æåæ¶æä¾ä¸¤ç§éæ©ï¼å 为ææ¾å®é ä¸ä¼å¸¦æ¥å®ç¨æ§çé®é¢ã
XMLHttpRequest.uploadæ¹æ³æ£æ¥é²æ¢å¨Operaä¸çé®é¢ãæµè§å¨æ¯æFileï¼FileListåFileReaderï¼ä½ä¸æ¯æææ¾äºä»¶æXMLHttpRequest2ãå æ¤ï¼å®å¯ä»¥æ¾ç¤ºæ件信æ¯ï¼ä½æ们ä¸å¸ææ¾ç¤º#filedragçå ç´ æå é¤submitæé®ã
æ¹åæ件ææ¾é£æ ¼
å¾å°äººå¨æµè§å¨ä¸è¿è¡è¿æ件ææ¾ãäºå®ä¸ï¼ç»éªä¸°å¯çç½ç»ç¨æ·ä¹ä¸å¤ªèèæ¯å¦å¯è¡ãå æ¤ï¼æ们使ç¨äºæ æâdrop files hereâçå ç´ ãå½æ件æå°#filedragä¸æ¶ï¼æ们è¿éè¿æ¹åå ç´ çé£æ ¼æ¥è¿è¡æ¾ç¤ºã
åææ¾ä¸æ被éä¸çæ件
æ 论æ¯ä½¿ç¨âBrowseâæé®æ¥éä¸ä¸ä¸ªæå¤ä¸ªæ件ï¼æè å°æ件ææ¾å°æ#filedragçä½ç½®ä¸ï¼æ们使ç¨ççç¸åFileSelectHandler()å½æ°æ¥è¿è¡å¤çï¼
å½æ°è¯´æï¼
1.è°ç¨FileDragHover()å é¤hoveré£æ ¼ååæ¶æµè§å¨çäºä»¶ãè¿æ¯å¿ ä¸å¯å°çï¼å¦åæµè§å¨å¯è½ä¼å°è¯æ¾ç¤ºè¯¥æ件ã
2.è·åä¸ä¸ªFileList对象ï¼æ 论æ¯ä»æ件è¾å ¥æ¡ï¼e.target.filesï¼æ#filedragå ç´ ï¼ä¾å¦dataTransfer.filesï¼ã
3.æåï¼å½æ°éåFileListçææFile对象ï¼å¹¶æå®ä½ä¸ºä¸ä¸ªåæ°ä¼ éç»ParseFile()å½æ°...
该å½æ°è¾åºçä¿¡æ¯æ¯File对象æä¾çä¸ä¸ªä¸»è¦çåªè¯»å±æ§ï¼
§.name: æ件å (ä¸å å«æ件路å¾)ã
§.type: MIMEç±»å, ä¾å¦ image/jpegï¼text/plainççã
§.size: æ件大å°ï¼åèï¼.
1.å®ç°å°æ件ææ¾å°é¡µé¢å ç´ ä¸
2.å¨JavaScriptä¸åæ被ææ¾çæ件
3.å¨å®¢æ·ç«¯ä¸å è½½å解ææ件
4.使ç¨XMLHttpRequest2å°æ件å¼æ¥ä¸ä¼ å°æå¡å¨
5.ä¸ä¼ æ¶ï¼æ¾ç¤ºå¾å½¢è¿åº¦æ¡
6.使ç¨è¿ç¨å¢å¼º( progressive enhancement)以确ä¿æ件ä¸ä¼ 表åå¨æææµè§å¨æ£å¸¸å·¥ä½
7.纯JavaScript代ç ï¼ä¸ä½¿ç¨å ¶å®åºã
å»ï¼å¼å§å§ï¼
ç³ç³çæµè§å¨æ¯æ
å¨å¼å§ä¹å说æä¸ä¸ï¼è¿ä¸ªæç¨ä½¿ç¨äºä¸äºHTML5çææ°ææ¯ï¼å¯è½ä»¥åä¼è¢«ä¿®æ£ãç®å代ç å¯ä»¥æ£å¸¸å·¥ä½ï¼ä½æ¯å¾å¯è½éçAPIçååæè æµè§å¨å级èåå°å½±åã
§FirefoxåChromeçææ°çæ¬æ¯æææçåè½å¹¶ä¸å¯ä»¥å®ç¾è¿è¡ã
§Operaå¯ä»¥ç¨JavaScript解ææ件ï¼ä½æªå®ç°ææ¾æ件åXMLHttpRequest2ä¸ä¼ ã
§IEæµè§å¨åæ¡é¢çæ¬çSafariä¸æ¯æææçAPIã
§è¹æå·²ç¦ç¨Safariæµè§å¨çiPhoneåiPadçæ¬çHTMLæ件ä¸ä¼ 表åãæè°ç¥é为ä»ä¹åï¼
æåï¼è¯·æ³¨ææç代ç åªæ¯æ¼ç¤ºäºåºæ¬æ¦å¿µï¼å ä¹æ²¡æé误æ£æ¥ï¼å æ¤éè¦è¿è¡ä¿®æ¹ä»¥éåºä½ çå·¥ä½éè¦ã
HTMLåCSS
è¿æ¯æ们ç带ææ件è¾å ¥ç±»åçæ å表åãå¯ä¸çHTML5ç¹æ§æ¯âmultipleâå±æ§ï¼å®å 许ç¨æ·éæ©ä»»ææ°éçæ件ã
æ们å°ä¸ä¼ æ件å°è¿è¡PHPçæå¡å¨ä¸ï¼ä½æ¯æ è®ºä½ å¨æå¡å¨ç«¯ä½¿ç¨ä»ä¹ææ¯ï¼ä»£ç æ¯å¤§è´ç¸åçãéèçMAX_FILE_SIZEå¼æå®ä¸º300,000个åèï¼è¿æ¯PHP使ç¨çï¼ä½æ们è¿ä¼å¨æµè§å¨ç«¯ç¨å®è¿è¡æ£æ¥ï¼ä»¥é²æ¢å¤§æ件ä¸ä¼ ã
#filedragå ç´ å°è¢«ç¨ä½æ¥æ¶ææ¾æ件çä½ç½®ãå ç´ æ¯éè¿CSSéèçï¼ä½å¦ææµè§å¨æ¯æææ½çè¯ï¼å®ä¼å¨JavaScriptä¸è¢«æ¾ç¤ºï¼
æ们è¿å®ä¹äºä¸ä¸ª.hoverç±»ï¼å½ç¨æ·æå¨æ件å°ç¸åºåºåå ç´ æ¶ï¼æ¹åå ç´ çæ¾ç¤ºé£æ ¼ãæµè§å¨ä¸æ¯æå¨é£ç§æ åµä¸ç:hoveré£æ ¼ï¼ä½å½äºä»¶è§¦åæ¶ï¼æ们å¯ä»¥ç¨JavaScriptæ·»å ç±»ã
æ件æä½API
W3C æ件æä½API
æä¾äºä¸äºå¯¹è±¡ï¼æ们使ç¨äºï¼
§FileListï¼ä»£è¡¨éå®çæ件æ°ç»ã
§Fileï¼ä»£è¡¨ä¸ä¸ªåç¬çæ件ã
§FileReaderï¼æ¯æJavaScriptç客æ·ç«¯è¯»åæ件æ°æ®çæ¥å£ã
Javascriptäºä»¶
æ¯æ¶åå¤çJavaScript代ç äºãæ们ä¸ä½¿ç¨ä»»ä½JavaScriptåºï¼ä¸ºäºèçæ¶é´ï¼æ们å°å建ä¸ä¸ªè¾ å©å½æ°è¿åå ç´ çIDåè¾åºç¶ææ¶æ¯ï¼
æ们å°å¨Init()å½æ°éæ£æ¥æ件æä½APIæ¯å¦ææ:
Init()å½æ°è¯´æ:
1.ç»æ件è¾å ¥å ç´ è®¾ç½®ä¸ä¸ªâchangeâäºä»¶çå¬å¨ã
2.æ¾ç¤º#filedragå ç´ ã
3.设置âdragoverâåâdragleaveâäºä»¶çå¬å¨ï¼ä»¥æ¹åçï¼filedragå ç´ çé£æ ¼ã
4.ç»#filedragå ç´ è®¾ç½®ä¸ä¸ªâdropâçäºä»¶çå¬å¨ã
5.éè表åçæ交æé® - å®ä¸æ¯å¿ éçï¼å 为å½æ件被éä¸æ¶æ们å°è¿è¡åæåä¸ä¼ ï¼èä¸æ¯æ交表åã
æè ï¼å½æµè§å¨æ¯ææ件æå¨æ¶ï¼ä½ å¯ä»¥éèæ件è¾å ¥å ç´ ã就个人èè¨ï¼ææ´æ¿æåæ¶æä¾ä¸¤ç§éæ©ï¼å 为ææ¾å®é ä¸ä¼å¸¦æ¥å®ç¨æ§çé®é¢ã
XMLHttpRequest.uploadæ¹æ³æ£æ¥é²æ¢å¨Operaä¸çé®é¢ãæµè§å¨æ¯æFileï¼FileListåFileReaderï¼ä½ä¸æ¯æææ¾äºä»¶æXMLHttpRequest2ãå æ¤ï¼å®å¯ä»¥æ¾ç¤ºæ件信æ¯ï¼ä½æ们ä¸å¸ææ¾ç¤º#filedragçå ç´ æå é¤submitæé®ã
æ¹åæ件ææ¾é£æ ¼
å¾å°äººå¨æµè§å¨ä¸è¿è¡è¿æ件ææ¾ãäºå®ä¸ï¼ç»éªä¸°å¯çç½ç»ç¨æ·ä¹ä¸å¤ªèèæ¯å¦å¯è¡ãå æ¤ï¼æ们使ç¨äºæ æâdrop files hereâçå ç´ ãå½æ件æå°#filedragä¸æ¶ï¼æ们è¿éè¿æ¹åå ç´ çé£æ ¼æ¥è¿è¡æ¾ç¤ºã
åææ¾ä¸æ被éä¸çæ件
æ 论æ¯ä½¿ç¨âBrowseâæé®æ¥éä¸ä¸ä¸ªæå¤ä¸ªæ件ï¼æè å°æ件ææ¾å°æ#filedragçä½ç½®ä¸ï¼æ们使ç¨ççç¸åFileSelectHandler()å½æ°æ¥è¿è¡å¤çï¼
å½æ°è¯´æï¼
1.è°ç¨FileDragHover()å é¤hoveré£æ ¼ååæ¶æµè§å¨çäºä»¶ãè¿æ¯å¿ ä¸å¯å°çï¼å¦åæµè§å¨å¯è½ä¼å°è¯æ¾ç¤ºè¯¥æ件ã
2.è·åä¸ä¸ªFileList对象ï¼æ 论æ¯ä»æ件è¾å ¥æ¡ï¼e.target.filesï¼æ#filedragå ç´ ï¼ä¾å¦dataTransfer.filesï¼ã
3.æåï¼å½æ°éåFileListçææFile对象ï¼å¹¶æå®ä½ä¸ºä¸ä¸ªåæ°ä¼ éç»ParseFile()å½æ°...
该å½æ°è¾åºçä¿¡æ¯æ¯File对象æä¾çä¸ä¸ªä¸»è¦çåªè¯»å±æ§ï¼
§.name: æ件å (ä¸å å«æ件路å¾)ã
§.type: MIMEç±»å, ä¾å¦ image/jpegï¼text/plainççã
§.size: æ件大å°ï¼åèï¼.
温馨提示:答案为网友推荐,仅供参考