文件夹实现拖放上传

现要求能在浏览器上直接拖放一个文件夹实现批量上传

 

Html5规范还不支持
但是目前chrome >= 21 浏览器支持

 

现在文件的拖放上传采用的是
jquery-filedrop.js
https://github.com/weixiyen/jquery-filedrop
这个不支持文件夹

我把这个做了改进，可以支持文件夹。

 

原先代码：

   function drop(e) {
      if( opts.drop.call(this, e) === false ) return false;
      files = e.dataTransfer.files;
      if (files === null || files === undefined || files.length === 0) {
        opts.error(errors[0]);
        return false;
      }
      files_count = files.length;
      upload();
      e.preventDefault();
      return false;
    }

 

改进如下：

   function drop(e) {
      if( opts.drop.call(this, e) === false ) return false;

      function walkFileSystem(directory, callback, error) {
        if (!callback.pending) {
          callback.pending = 0;
        }
        if (!callback.files) {
          callback.files = [];
        }

        callback.pending++;

        var reader = directory.createReader(),
        relativePath = directory.fullPath.replace(/^\//, '').replace(/(.+?)\/?$/, '$1/');
        reader.readEntries(function(entries) {
          callback.pending--;
          $.each(entries, function(index, entry) {
            if (entry.isFile) {
              callback.pending++;
              entry.file(function(File) {
                File.path = encodeURIComponent(relativePath);
                callback.files.push(File);
                if (--callback.pending === 0) {
                    callback(callback.files);
                }
              }, error);
            } else {
              walkFileSystem(entry, callback, error);
            }
          });

          if (callback.pending === 0) {
            callback(callback.files);
          }
        }, error);
      }

      var items = e.dataTransfer.items || [], firstEntry;
        if (items[0] && items[0].webkitGetAsEntry && (firstEntry = items[0].webkitGetAsEntry())) {
          // Experimental way of uploading entire folders (only supported by chrome >= 21)
          walkFileSystem(firstEntry.filesystem.root, function(allfiles) {
            files = allfiles;
            files_count = files.length;
            upload();

          }, function() {
            // Fallback to old way when error happens
            files = e.dataTransfer.files;
            files_count = files.length;
            upload();
          });
        } else {
          files = e.dataTransfer.files;
          files_count = files.length;
          upload();
      }

      e.preventDefault();
      return false;
    }

 

以上改进点说明：

如果浏览器支持文件夹拖放，判断类型，如果是文件夹就递归读取文件夹目录树，

找到所有文件，最后在上传。

 

怎样做到按目录树保存文件呢？

 

其实递归读取文件夹时，我给文件赋值了path值，就是相对路径，

这样服务端就可以根据这个path，实现按目录树保存了。

 

其他地方的修改点就不一一列出了，附上修改后的完整代码。