9

我正在开发一个 Web 应用程序，它从一组文本文件中读取数据并将其映射到 MySQL 数据库。

目前，表单需要手动输入文件路径，但我想在此字段中添加一个文件选择器，以使该部分的设置不那么乏味。

我发现的解决方案都允许选择单个文件，但我正在寻找一个允许使用输入模式的解决方案，因为我们的大多数工作都需要我们一次从服务器上提取多个文件。

非常感谢您对此事的任何帮助。

4

1 回答 1

14

这需要大量搜索和一些工作，但我找到了一个合理可行的答案。

我面临的最大问题是浏览服务器端文件。我在A Beautiful Site找到了一个 jQuery 插件来解决这个问题。

它是一个 AJAX 文件浏览器，带有用于 JSP、PHP、ASP 等的服务器端连接器脚本。

我使用以下脚本构建了 webapp 的文件树：

  $(document).ready( function() {
    $('#loadFolderTree').fileTree({

        root: '/server_root/subfolder/tree_root',
        script: '/js/jquery_file_tree/connectors/jqueryFileTree.jsp',
        multiFolder: false,

    });    
  });

这个脚本的好处是它将选定的文件路径作为字符串返回。通过对脚本的默认文件处理进行一些小的添加，我能够使用以下代码将返回的文件路径写入适当的表单字段：

}, function(file) {
            var loadPat = document.getElementById("loadPattern");
            loadPat.value = file.replace("/server_root/subfolder/tree_root/", "");

由于表单已经构建为处理相对于根目录的文件，因此无需打印整个路径，因此最后一段代码修剪到根目录的路径，并将表单值设置为字符串。

最重要的是，返回的字符串是可编辑的，允许用户将 input-file-1.txt 的返回更改为 input-file*.txt 并在一次运行中导入多个文件。

这是最终结果：

  $(document).ready( function() {
    $('#loadFolderTree').fileTree({

        root: '/server_root/subfolder/tree_root',
        script: '/js/jquery_file_tree/connectors/jqueryFileTree.jsp',
        multiFolder: false,

    }, function(file) {
        var loadPat = document.getElementById("loadPattern");
        loadPat.value = file.replace("/server_root/subfolder/tree_root/", "");

    });    
  });
于 2012-02-03T16:21:30.327 回答