使用 Dropzone 和 Seaside 拖放答案

【问题标题】：Drag & Drop using Dropzone and Seaside使用 Dropzone 和 Seaside 拖放
【发布时间】：2016-03-22 17:12:58
【问题描述】：

我在拖放文件的 dropzone 实现方面有点挣扎。我正在使用前端 Seaside 的 Smalltalk 平台上进行开发。目前，我可以上传文件，但在上传时看不到成功图标和进度条。当我检查网络上的元素时，我确实看到代表成功/进度的 div 存在。我确实看到文件大小和文件名出现在文件被放入时。有人能指出我遗漏了什么吗？我的代码如下：

| serverURL url | 

serverURL := RepWebSettings portalSettingsWebServerURL ifNil: [self session requestContext request uri serverURL].
url := serverURL , 
        html context actionUrl printString ,
         '&' , (html callbacks store: (Seaside.WAValueCallback on: [self uploadFileDroppedFiles])).

html div class: 'layoutBorder'; with: [
    html div id: 'draganddropupload'; class: 'dropzone'; 
        with: [
            html div class: 'dz-message'; with: [
                html image url: RepWebFileLibrary / #draganddropPng]]].

html script: ('
    $(document).ready(function () {
        Dropzone.autoDiscover = false;
        Dropzone.uploadMultiple = true;
        Dropzone.createImageThumbnails = false; 
        $("#draganddropupload").dropzone({
            url: "%1",
            success: function (file, response) {
                document.location.reload(true);
            }
        });
    });' bindWith: url).

【问题讨论】：

标签： javascript dropzone.js seaside

【解决方案1】：

当您使用打开到“控制台”选项卡的 Chrome 开发者工具运行示例时，您会看到哪些 javascript 错误？似乎 Dropzone 管理进度条和复选标记。

从他们的简单例子来看：

https://github.com/enyo/dropzone/blob/gh-pages/examples/simple.html

您所拥有的和他们所拥有的唯一区别是他们使用带有“dropzone”类的“form”标签，而您使用的是“div”标签。

因此，Dropzone 可能希望以“形式”运行，并且该形式没有任何其他输入。因此，如果是我，我会将您海边代码中的 div 标记更改为一个表单，并确保新表单没有嵌套在页面上的另一个表单中。

【讨论】：