Question

我正在寻找一些如何使用DropZone.js（DZ）和Tapestry 4（T4）处理拖放（DD）的想法。由于T4无法在服务器端自然处理DD，我必须找到一些解决方法。昨天我遇到了DZ，这是客户端DD的一个非常好的脚本。

在这里，我将展示我当前的页面，它能够在客户端处理DD，之后我会解释我想要达到的目的。

Drag&Drop

用户将某些文件放入相应的div后，然后单击“上传文件”按钮，下表将使用上传的文件进行更新。但是会出现以下问题：

Tapestry 4无法在服务器端处理DD
我们的Tomcat无法处理PHP上传文件

我的HTML文件的DD部分是：

<button id="clear-dropbox" class="FileButtons">Clear Dropzone</button>
<button id="upload-files" class="FileButtons">Upload Files</button>

<div id="dropbox" ><span id="droplabel">Drop file here...</span>
</div>

<script type="text/javascript">

            $jQuery(document).ready(function()
            {       
                var dropbox = new Dropzone("div#dropbox", { url: "php/upload.php"});
                document.querySelector("#dropbox").classList.add("dropzone");
            } );

            Dropzone.options.dropbox = {

                init: function() {

                var myDropbox = this;

                  var deleteButton = document.querySelector("#clear-dropbox");
                  var uploadButton = document.querySelector("#upload-files");

                  deleteButton.addEventListener("click", function() {
                    myDropbox .removeAllFiles(true);
                  });

                  uploadButton.addEventListener("click", function() {
                        console.log(myDropbox.files);

                  });   
                }
              };

        </script>

单击“上载”按钮时，上载事件侦听器会正确打印文件（绝对路径，名称等）。如果TomCat支持PHP，那么我可以使用php脚本中的$ _FILES会话变量来上传文件（Upload a file with PHP）。但不幸的是，这是不可能的。

我能想象的是我使用T4中的隐形上传组件。但是我必须找到一种方法来将每个文件从dropzone设置到上传组件，但如果这是一个很好的解决方案，我不会感到害羞。

编辑：如上所述：JavaScript - No setting of file input value 无法使用JavaScript设置输入字段的值，因此使用一个或多个不可见的fileds输入字段的想法已过时。

Upload file

作为总结，我想要将丢弃到dropzone的文件发送到服务器。首先，它们不应该作为文件直接存储到服务器，但它们必须在我的Java类中可用于适当的T4页面。我想以单独的方式处理文件（创建一个自己的FileHelper对象，可用于显示表中的文件，您可以在上图和其他内容中看到）任何人都可以帮我提供服务器端拖放的一些输入吗？

Answer 1

首先，您必须了解客户端 - 服务器端的工作原理。在客户端收到客户请求之前，服务器完全不知道客户端发生了什么。所以服务器端没有拖拽。你的javascript插件做的是以某种方式排列文件，然后将它们发送到服务器。

在您的代码段中，您使用的是PHP脚本来处理文件上传。您需要找到的是一个用于处理插件POST请求的java包装器。如果它不是由插件开发人员提供的，那么即使使用PHP脚本作为配方，也可以使用Java I / O构建自己的。

您还可以找到大量关于Java文件上传和tapestry文件上传的教程。我建议你在使用这个Javascript插件之前先看看其中一个。

使用Dropzone.js和Tapestry 4拖放

1 个答案: