最近被安排做一個拖拽上傳和資料夾上傳的功能，不考慮相容性，哈哈這個可以用HTML5實現。這裡就不仔細學習HTML5，我只是想找例子，然後偷過來用，至於原理邊用邊學。

仔細看完估計原理你也會懂的。

可是並不是那麼一帆風順，故事發生了：

資料夾上傳的時候，如果資料夾內還有資料夾上面的那個例子就不能運行了，同時也不能保持目錄結構。

js的方便就在於除錯方便，更有利器console.log(obj).下面的內容是在仔細看了上面兩個例項的基礎上：

在第一個例子中有一個函式ParseFile，我在裡面加了一個console.log（file），然後再chrome下面看到如下除錯資訊：

有了這個路徑屬性，我就可用在ajax中把次屬性當做引數，用於儲存目錄結構。

1. xhr.open("POST", "upload.php?fname="+file.webkitRelativePath, true);  

然後upload.php新增處理函式：

1. function createFolder($path) {  
2.     if (!file_exists($path)) {  
3.         createFolder(dirname($path));  
4.         mkdir($path,0777);  
5.     }  
6. }  
7. $fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false);  
8.     $fname = $_GET['fname'];  
9.     if ($fname!=''&& $fname!='undefined') {  
10.         createFolder('uploads/'.dirname($fname));  
11.         $targetfile = 'uploads/' . $fname;  
12.     }else{  
13.         $targetfile
     = 'uploads/'.$fn;  
14.     }  
15.     // AJAX call  
16.     if (file_put_contents($targetfile,file_get_contents('php://input'))){  
17.         echo "ok";  
18.     }else{  
19.         echo "failed";  
20.     }  

於是解決了多次資料夾上傳的功能。

-----------------------------------------------

程式碼依次是：例項1（拖拽上傳），例項2（資料夾上傳），修改後的多層資料夾上傳（細節請包容）,