diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index 1d32d10c45..7d9b236a27 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -156,7 +156,7 @@
     <% } else { %>
     <a href="#<%= category %>/lib/<%= repo_id %>/" class="path-link normal"><%- repo_name %></a> /
     <% for (var i = 0,len = path_list.length - 1; i < len; i++) { %>
-        <a href="#<%= category %>/lib/<%= repo_id %>/<% print(path_list.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a> /
+        <a href="#<%= category %>/lib/<%= repo_id %>/<% print(path_list_encoded.slice(0, i+1).join('/')); %>" class="path-link normal"><%- path_list[i] %></a> /
     <% } %>
     <%- path_list[i] + ' /' %>
     <% } %>
@@ -170,9 +170,9 @@
     <td class="dirent-icon"><img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon" %}" /></td>
     <td>
         <% if (category) { %>
-        <span class="dirent-name"><a href="#<%= category %>/lib/<%= repo_id %><%- dirent_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
+        <span class="dirent-name"><a href="#<%= category %>/lib/<%= repo_id %><%- encoded_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
         <% } else { %>
-        <span class="dirent-name"><a href="#lib/<%= repo_id %><%- dirent_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
+        <span class="dirent-name"><a href="#lib/<%= repo_id %><%- encoded_path %>" class="dir-link normal"><%- dirent.obj_name %></a></span>
         <% } %>
     </td>
     <td class="dirent-op">
diff --git a/static/scripts/app/views/dir.js b/static/scripts/app/views/dir.js
index 88b55b9266..c663563c4c 100644
--- a/static/scripts/app/views/dir.js
+++ b/static/scripts/app/views/dir.js
@@ -216,10 +216,13 @@ define([
                         category: dir.category
                     };
 
+                var path_list = path.substr(1).split('/');
+                var path_list_encoded = path_list.map(function(e) { return encodeURIComponent(e); });
                 if (path != '/') {
                     $.extend(obj, {
-                       path_list: path.substr(1).split('/'),
-                       repo_id: dir.repo_id,
+                       path_list: path_list,
+                       path_list_encoded: path_list_encoded,
+                       repo_id: dir.repo_id
                     });
                 }
 
diff --git a/static/scripts/app/views/dirent.js b/static/scripts/app/views/dirent.js
index 77ad68edf3..862cd79716 100644
--- a/static/scripts/app/views/dirent.js
+++ b/static/scripts/app/views/dirent.js
@@ -29,9 +29,11 @@ define([
 
         render: function() {
             var dir = this.dir;
+            var dirent_path = Common.pathJoin([dir.path, this.model.get('obj_name')]);
             this.$el.html(this.template({
                 dirent: this.model.attributes,
-                dirent_path: Common.pathJoin([dir.path, this.model.get('obj_name')]),
+                dirent_path: dirent_path,
+                encoded_path: Common.encodePath(dirent_path),
                 category: dir.category,
                 repo_id: dir.repo_id,
                 user_perm: dir.user_perm,
diff --git a/static/scripts/common.js b/static/scripts/common.js
index 4c24e611a0..5c5fd92d37 100644
--- a/static/scripts/common.js
+++ b/static/scripts/common.js
@@ -296,6 +296,12 @@ define([
             return result;
         },
 
+        encodePath: function(path) {
+            return path.split('/').map(function(e) {
+                return encodeURIComponent(e);
+            }).join('/');
+        },
+
         closePopup: function(e, popup, popup_switch) {
             var target = e.target || event.srcElement;
             if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target) && !popup_switch.find('*').is(target) ) {