DropzoneJS:如何在上传成功后获得PHP响应?

时间:2013-10-15 20:31:21

标签: javascript php dropzone.js

我正在尝试在我的网站上实施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";

任何人都可以帮助我理解我所缺少的东西吗?

6 个答案:

答案 0 :(得分:73)

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

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

$(function() {
        Dropzone.options.uiDZResume = {
            success: function(file, response){
                alert(response);
            }
        };
    });

答案 1 :(得分:23)

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

new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});

答案 2 :(得分:7)

这个有问题的答案对我不起作用。这样做:

 Executors.newScheduledThreadPool(n)
.scheduleAtFixedRate(()->{...}, 0, 15, TimeUnit.MINUTES)

在php方面:

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

答案 3 :(得分:3)

以上都不适合我,但是这......

<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>

答案 4 :(得分: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);
        });
    }
});

答案 5 :(得分:0)

请注意,分块上传存在问题,并且永远不会从服务器获取成功后的响应。在这种情况下,所有先前的答案将不起作用。解决方案可能是通过手动解析XHR响应,如下所示:

    <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>

还可以在https://gitlab.com/meno/dropzone/issues/51#note_47553173

的Dropzone存储库中检查问题