43

我正在尝试在我的网站上实施 Dropzone。我想监听“成功”事件，然后获取服务器响应，并在上传完成后将一些信息添加到与 DropZone 相同页面上的表单中。

我想在服务器响应中获得的信息是文件的直接链接。

dropzone的网站：http ://www.dropzonejs.com/

我的项目网站：

http://37.34.62.131/test/

所以我在我的项目的旧版本中完成了这个，但我不知道如何使用 dropzone.js

工作示例：

http://37.34.62.131/test/uploader%201.0/

我尝试做的是，当文件上传后，我想通过下载链接在同一页面上获取 php 响应，如下所示。

我也可以将我的源代码发送给您，以便您自己查找。

我想在响应中看到我的 php 代码：

        print '<h2>Picture Uploaded Successfuly!!!!</h2> <p id="codes">

      <img src="'.$imgurl.'" height="300" alt="Uploaded Picture" >
        <label for="codebb">BBCode:</label>
        <input type="text" id="codebb" value="[URL='.$siteurl.'][IMG]'.$dlurl.'[/IMG][/URL]" onclick="javascript:this.focus();this.select();" readonly="true" /><br />
        <label for="codehtml">HTML Code: </label>
        <input type="text" id="codehtml" value=\'&lt;a href="'.$siteurl.'"&gt;&lt;img src="'.$dlurl.'" alt="'.$alt.'" /&gt;&lt/a&gt;\' onclick="javascript:this.focus();this.select();" readonly="true" /><br />
        <label for="codedirect">Direct Link:</label>
        <input type="text" id="codedirect" value="'.$dlurl.'" onclick="javascript:this.focus();this.select();" readonly="true" /></p>';
        echo ".$newname";

谁能帮我理解我错过了什么？

4

6 回答 6

86

查看您的网站，您似乎能够解决问题。

无论如何，这适用于可能仍在寻找的人。您需要使用两个参数添加函数success。返回的第一个参数始终是文件，第二个是响应。

其他答案之一有这个，但这个回应最初没有包括它。将 autoDiscover 设置为 false 很重要，否则此示例（如文档中提供的）不起作用。在 Win10 上的 Chrome/IE/Edge 上测试。

样本：

Dropzone.autoDiscover = false;

$(function() {
        Dropzone.options.uiDZResume = {
            success: function(file, response){
                alert(response);
            }
        };
    });
于 2013-11-21T06:14:38.473 回答
30

我在使用 dropzone 时遇到了一些问题，但我找到了这个解决方案：

new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});
于 2014-09-17T03:31:43.653 回答
13

有效的答案对我不起作用。这样做：

$(".mydrop").dropzone({ 
    url: upload_url, 
    success : function(file, response){
        console.log(file);
        console.log(response);
    }
});

在php方面：

echo json_encode($whateverouwant);
die();
于 2015-05-06T08:40:44.250 回答
5

以上都不适合我，但这...

<script>

    Dropzone.autoDiscover = false;
$(function(){

    uploader = new Dropzone(".dropzone",{
        url: "http://locahost/upload",
        paramName : "uploadedFiles",
        uploadMultiple :false,
        acceptedFiles : "image/*,video/*,audio/*",
        addRemoveLinks: true,
        forceFallback: false,
        maxFilesize:1000,
        parallelUploads: 100,

    });//end drop zone

  uploader.on("success", function(file,response) {
   console.log(response)
  });



});//end jq
</script>
于 2017-10-02T01:55:05.397 回答
4

请注意，分块上传存在问题，并且在成功时永远不会从服务器返回响应。在这种情况下，所有先前的答案都不起作用。解决方案可以通过手动解析 XHR 响应，如下所示：

const galleryZone = new Dropzone(".dropzone-gallery", {
    url: your_upload_url_in_here,
    chunking: true,
    forceChunking: true,
    chunkSize: 2000000,
    success: (file, response) => {
        console.log(JSON.parse(file.xhr.response));
    }
});

您也可以在这里https://gitlab.com/meno/dropzone/issues/51#note_47553173在 Dropzone 的存储库中检查问题

于 2019-05-30T14:04:44.590 回答
1

但是，如果我使用此代码，那么我必须从表单中删除 dropzone 类。否则会抛出这个错误。

throw new Error("Dropzone already attached.");
---------------------------------------------
new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});
于 2015-03-17T11:15:09.147 回答