HTML5-FileSystem-Demo/index.html at master · superwunc/HTML5-FileSystem-Demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML5 FileSystem Demo</title>
        <link href="style/app.css" rel="stylesheet"/>

    </head>
    <body>

       <div id="file-system">
           <div id="file-system-header">
               <h3>HTML 5 文件系统 </h3>
               <div id="file-system-toolbar">
                   <div id="add-file" class="toolbtn" title="新建文本文件"></div>
                   <div id="add-folder" class="toolbtn" title="新建文件夹"></div>
                   <div id="delete-file" class="toolbtn"></div>
                   <div id="download-file" class="toolbtn" title="下载文件"></div>
                   <div id="upload-file-warpper" class="toolbtn file-input">
                       <input id="upload-file" style="width:36px;height: 36px;" type="file"  multiple="true" />
                   </div>

               </div>
               <div id="file-system-nav"></div>
           </div>
           <div id="file-system-content">


           </div>
       </div>
       <div id="txt-editor-dialog" class="dialog" >
           <div id="txt-title"  class="dialog-title"></div>
           <div class="dialog-close close-btn"></div>
           <div class="dialog-content">
               <textarea id="txt-editor" style="width: 95%;height: 95%"></textarea>
           </div>
           <div class="dialog-toolbar">
               <div id="save" class="toolbtn"></div>
               <div id="cancel" class="toolbtn close-btn cancel-btn"></div>
           </div>
       </div>
        <div id="image-editor-dialog" class="dialog" >
           <div id="image-title"  class="dialog-title"></div>
           <div class="dialog-close close-btn"></div>
           <div class="dialog-content">
               <img id="image-editor"/>
           </div>
       </div>
       <div id="file-copy-conflict-dialog" class="dialog conflict-dialog">
           <div class="dialog-title">
               <p>此位置已经包含同名文件</p>
               <p>请单击要保留的文件</p>
           </div>
           <div class="dialog-close close-btn"></div>
           <div class="dialog-content">
               <ul>
                   <li data-command="file-copy-replace">
                       <p>复制和替换</p>
                       <p>使用正在复制的文件替换目标文件夹中的文件:</p>
                   </li>
                   <li data-command="file-no-copy">
                       <p>不要复制</p>
                       <p>将不会更改任何文件。将此文件保留在目标文件夹中:</p>
                   </li>
                   <li data-command="file-copy-rename">
                       <p>复制, 但保留这两个文件</p>
                   </li>
               </ul>
           </div>
       </div>
       <div id="file-cut-conflict-dialog" class="dialog conflict-dialog">
           <div class="dialog-title">
               <p>此位置已经包含同名文件</p>
               <p>请单击要保留的文件</p>
           </div>
           <div class="dialog-close close-btn"></div>
           <div class="dialog-content">
               <ul>
                   <li data-command="file-cut-replace">
                       <p>移动和替换</p>
                       <p>使用正在移动的文件替换目标文件夹中的文件:</p>
                   </li>
                   <li data-command="file-no-cut">
                       <p>请勿移动</p>
                       <p>将不会更改任何文件。将此文件保留在目标文件夹中:</p>
                   </li>
                   <li data-command="file-cut-rename">
                       <p>移动, 但保留这两个文件</p>
                   </li>
               </ul>
           </div>
       </div>
       <div id="folder-copy-conflict-dialog" class="dialog conflict-dialog">
           <div class="dialog-close close-btn"></div>
           <div class="dialog-content" style="margin-top: 20px;">
               <p>此目标已包含名为  的文件夹</p>
               <p>如果任何文件使用相同的名称,将会询问您是否要替换这些文件。</p>
               <p>您仍想将这个文件夹进行合并么？</p>
           </div>
           <div class="dialog-toolbar">
               <div  class="toolbtn ok-btn" data-command="folder-copy-ok"></div>
               <div  class="toolbtn close-btn cancel-btn"></div>
           </div>
       </div>
       <div id="folder-cut-conflict-dialog" class="dialog conflict-dialog">
           <div class="dialog-close close-btn"></div>
           <div class="dialog-content" style="margin-top: 20px;">
               <p>此目标已包含名为  的文件夹</p>
               <p>如果任何文件使用相同的名称,将会询问您是否要替换这些文件。</p>
               <p>您仍想将这个文件夹进行合并么？</p>
           </div>
           <div class="dialog-toolbar">
               <div  class="toolbtn ok-btn" data-command="folder-cut-ok"></div>
               <div  class="toolbtn close-btn cancel-btn"></div>
           </div>
       </div>
       <a id="download-target"></a>
       <div id="fun-context-menu" class="popup-menu">
           <ul>
               <li class="popup-menu-item" data-command="cut" >剪切</li>
               <li class="popup-menu-item" data-command="copy" >复制</li>
               <li class="popup-menu-item" data-command="paste">粘贴</li>
               <li class="popup-menu-item" data-command="cancel">取消</li>
               <li class="popup-menu-item" data-command="rename">重命名</li>
           </ul>
       </div>

       <script type="text/javascript" src="lib/jsdeferred.js"></script>

       <script type="text/javascript" src="js/base.js"></script>
       <script type="text/javascript" src="js/fs.js"></script>
       <script type="text/javascript" src="js/ui.js"></script>
       <script type="text/javascript" src="js/filesys.js"></script>
       <script type="text/javascript" src="js/editor.js"></script>
       <script type="text/javascript" src="js/conflict.js"></script>
       <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>