文件上传搞定，支持一次拖拽多个

williamtse · Oct 14, 2013 · 0ed15a2 · 0ed15a2
1 parent 944ce1e
commit 0ed15a2
Show file tree

Hide file tree

Showing 5 changed files with 640 additions and 561 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,5 @@
 *.sublime*
 .sass-cache
 config.rb
-/config.inc.php
+/config.inc.php
+/usr/uploads/
diff --git a/admin/css/style.css b/admin/css/style.css
@@ -2004,6 +2004,12 @@ ul.typecho-list-notable li .loading {
     color: #999;
     font-size: .92857em;
 }
+
+#upload-panel.drag {
+    border-color: #ccc;
+    background-color: #e3e3e3;
+}
+
 #file-list {
     list-style: none;
     margin: 0;
@@ -2186,4 +2192,4 @@ div.token-input-dropdown ul li em {
 div.token-input-dropdown ul li.token-input-selected-dropdown-item {
     background-color: #467B96;
     color: #FFF;
-}
+}
diff --git a/admin/file-upload-js.php b/admin/file-upload-js.php
@@ -7,6 +7,7 @@
 }
 ?>
 
+<script src="<?php $options->adminUrl('javascript/filedrop.js?v=' . $suffixVersion); ?>"></script>
 <script>
 $(document).ready(function() {
     var errorWord = '<?php $val = function_exists('ini_get') ? trim(ini_get('upload_max_filesize')) : 0;
@@ -21,8 +22,10 @@
                 $val *= 1024;
         }
 
-        $val = number_format(ceil($val / 1024));
-        _e('附件上传失败, 请确认附件尺寸没有超过 %s 并且服务器附件目录可以写入', "{$val}Kb"); ?>';
+        $val = number_format(ceil($val / (1024 *1024)));
+        _e('附件上传失败, 请确认附件尺寸没有超过 %s 并且服务器附件目录可以写入', "{$val}Mb"); ?>',
+        loading = $('<img src="<?php $options->adminUrl('images/ajax-loader.gif'); ?>" style="display:none" />')
+            .appendTo(document.body);
 
     function fileUploadStart (file, id) {
         $('<li id="' + id + '" class="loading">'
@@ -79,7 +82,72 @@ function fileUploadComplete (id, url, data) {
         }
     }
 ?>],
-        uploadStarted   :   function (i, file, len) {
+
+        maxfilesize     :   <?php 
+        $val = function_exists('ini_get') ? trim(ini_get('upload_max_filesize')) : 0;
+        $last = strtolower($val[strlen($val)-1]);
+        switch($last) {
+            // The 'G' modifier is available since PHP 5.1.0
+            case 'g':
+                $val *= 1024;
+            case 'm':
+                $val *= 1024;
+            case 'k':
+                $val *= 1024;
+        }
+
+        echo ceil($val / (1024 * 1024));
+        ?>,
+
+        error: function(err, file) {
+            switch(err) {
+                case 'BrowserNotSupported':
+                    alert('<?php _e('浏览器不支持拖拽上传'); ?>');
+                    break;
+                case 'TooManyFiles':
+                    alert('<?php _e('一次上传的文件不能多于%d个', 25); ?>');
+                    break;
+                case 'FileTooLarge':
+                    alert('<?php $val = function_exists('ini_get') ? trim(ini_get('upload_max_filesize')) : 0;
+        $last = strtolower($val[strlen($val)-1]);
+        switch($last) {
+            // The 'G' modifier is available since PHP 5.1.0
+            case 'g':
+                $val *= 1024;
+            case 'm':
+                $val *= 1024;
+            case 'k':
+                $val *= 1024;
+        }
+
+        $val = number_format(ceil($val / (1024 *1024)));
+        _e('附件尺寸不能超过 %s', "{$val}Mb"); ?>');
+                    break;
+                case 'FileTypeNotAllowed':
+                    // The file type is not in the specified list 'allowedfiletypes'
+                    break;
+                case 'FileExtensionNotAllowed':
+                    alert('<?php _e('附件 %s 的类型不被支持'); ?>'.replace('%s', file.name));
+                    break;
+                default:
+                    break;
+            }
+        },
+
+
+        dragOver : function () {
+            $(this).addClass('drag');
+        },
+
+        dragLeave : function () {
+            $(this).removeClass('drag');
+        },
+
+        drop : function () {
+            $(this).removeClass('drag');
+        },
+
+        uploadOpened   :   function (i, file, len) {
             fileUploadStart(file.name, 'drag-' + i);
         },
 
@@ -109,7 +177,9 @@ function attachDeleteEvent (el) {
                 $.post('<?php $options->index('/action/contents-attachment-edit'); ?>',
                     {'do' : 'delete', 'cid' : cid},
                     function () {
-                        el.remove();
+                        $(el).fadeOut(function () {
+                            $(this).remove();
+                        });
                     });
             }