web-dev-qa-db-ja.com

DropzoneJS：アップロード成功後にPHP応答を取得する方法？

サイトにDropzoneを実装しようとしています。 「成功」イベントをリッスンし、サーバーの応答を取得して、アップロードの完了後にDropZoneと同じページのフォームに情報を追加します。

サーバーの応答で取得する情報は、ファイルへの直接リンクです。

dropzoneのWebサイト： http://www.dropzonejs.com/

私のプロジェクトのウェブサイト：

http://37.34.62.131/test/

私のプロジェクトの古いバージョンでこれを完了しましたが、dropzone.jsでそれを行う方法を理解できません

作業例：

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

私がやろうとしているのは、ファイルがアップロードされたときに、以下に示すように、ダウンロードリンクを含む同じページでPHPレスポンスを取得したいです。

iからソースコードを送信できるので、自分を探すことができます。

私の応答で見たい私の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";

誰かが私が欠けているものを理解するのを助けることができますか？

javascriptphpdropzone.js
36
Patrick Falize

ウェブサイトを見ると、問題を修正できたようです。

とにかく、これはまだ見ているかもしれない誰かのためです。 2つのパラメーターを使用して関数successを追加する必要があります。返される最初のパラメーターは常にファイルで、2番目のパラメーターは応答です。サンプル：

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

ドロップゾーンに問題がありましたが、この解決策が見つかりました。

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

有効な答えは私にはうまくいきませんでした。これは：

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

そして、PHP側では：

echo json_encode($whateverouwant);
die();
8
Reign.85

上記のどれも私にとってはうまくいきませんでしたが、これは...

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

チャンクアップロードには問題があり、成功した場合にサーバーから応答を返さないことに注意してください。その場合、以前の回答はすべて機能しません。解決策は、次のように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));
    }
});

また、こちらのDropzoneのリポジトリで問題を確認できます https://gitlab.com/meno/dropzone/issues/51#note_4755317

2
Atanas Ginev

しかし、このコードを使用している場合は、フォームからドロップゾーンクラスを削除する必要があります。それ以外の場合、このエラーがスローされます。

throw new Error("Dropzone already attached.");
---------------------------------------------
new Dropzone("#myDropzone", { 
    maxFilesize: 2, // MB
    init: function() {
        this.on("success", function(file, responseText) {
            console.log(responseText);
        });
    }
});
1
Vinay Sikarwar