我正在寻找一些想法如何使用 DropZone.js (DZ) 和 Tapestry 4 (T4) 处理拖放 (DD)。由于 T4 无法在服务器端处理 DD,我必须找到一些解决方法。昨天我遇到了 DZ,这是一个非常好的客户端 DD 脚本。
在这里,我将展示我当前的页面,该页面能够在客户端处理 DD,然后我将解释我想要达到的目标。
在用户将一些文件放到适当的 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>
单击 Upload 按钮时,upload 事件侦听器会正确打印出文件(绝对路径、名称等)。如果 TomCat 支持 PHP,那么我可以使用 php 脚本中的 $_FILES 会话变量来上传文件(使用 PHP 上传文件)。但不幸的是,这是不可能的。
我可以想象的是,我使用了 T4 中的一个不可见的上传组件。但是在那里我必须找到一种方法将每个文件从 dropzone 设置到上传组件,但我不确定这是否是一个好的解决方案。
编辑:如此处所述:JavaScript - 不设置文件输入值 无法使用 JavaScript 设置输入字段的值,因此使用一个或多个不可见文件输入字段的想法已过时。
作为总结,我想实现将被拖放到 dropzone 的文件发送到服务器。起初,它们不应该作为文件直接存储到服务器,但它们必须在我的 Java 类中用于适当的 T4 页面。我想以不同的方式处理文件(创建一个自己的 FileHelper 对象,该对象可用于显示您可以在上图中看到的表中的文件和其他内容)任何人都可以帮助我为服务器提供一些输入- 侧拖放?