web-dev-qa-db-ja.com

URLドロップゾーンを変更する方法は？ ajaxの成功で動的にURL

私はこれを読みました： https://github.com/enyo/dropzone/wiki/Set-URL-dynamically しかし、私は成功しませんでした... :(私は1つのフォームを持っています...

そして、私はajaxで入力を送信します。

Ajaxはユーザーの新しいIDを返します。この瞬間、新しいユーザーのIDへのパスを設定するためにde urldropzoneを変更したいと思います。

$.ajax({
    type: "POST",
    url: "class/inserir.php?funcao=teste",
    data: formdata,
    dataType: "json",
        success: function(json){
        if(json.sucesso=="sim"){
            alert("Wait! Sending Pictures.");
                    this.options.url = "class/upload_img.php?"+json.id;
            myDropzone.processQueue(); 
        }else{
        location.href="home.php?ir=cad_animal&cad=nao&erro="+json.erro;
        }
    }
});

var myDropzone = new Dropzone("#imagens", {

    url: "class/upload_imgteste.php",
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 1, // MB
    addRemoveLinks : true,
    dictResponseError: "Não foi possível enviar o arquivo!",
    autoProcessQueue: false,
    thumbnailWidth: 138,
    thumbnailHeight: 120,

});

私の悪い英語でごめんなさい！

全てに感謝。

dropzone.js
10
Marcelo Pessoa

ドロップゾーンの「処理」イベントリスナーに関数を追加できます。

Dropzone.options.myDropzone = {
  init: function() {
    this.on("processing", function(file) {
      this.options.url = "/some-other-url";
    });
  }
};

これが私がコードを入手したリンクであり、それは私のために機能します： https://github.com/enyo/dropzone/wiki/Set-URL-dynamically

20
jroi_web

この回答とdropzonewikiへのリンクを見つけて気に入らなかったという理由だけで、古い質問に対する新しい回答。そのようにプラグインのオプションを複数回変更することは非常に間違っているようです。

Dropzoneがいくつかのオプションを使用する場合、ファイル配列を渡すresolveOption関数を介してそれを実行します。現在のブランチでは、オプションの関数を定義できます：メソッド、URL、タイムアウト。

これは、ajaxの遅延を含む完全な実例です。

Dropzone.autoDiscover = false;

const doStuffAsync = (file, done) => {
  fetch('https://httpbin.org/get').then((response) => {
    file.dynamicUploadUrl = `https://This-URL-will-be-different-for-every-file${Math.random()}`
    done();//call the dropzone done
  })  
}

const getMeSomeUrl = (files) => {
  return `${files[0].dynamicUploadUrl}?sugar&spice`;
}

let myDropzone = new Dropzone("#my-awesome-dropzone", {
  method: "put",
  accept: doStuffAsync,
  url: getMeSomeUrl
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/min/dropzone.min.css">

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone">
</form>
3
BlueWater86

これを変える

this.options.url = "class/upload_img.php?"+json.id;

これに

myDropzone.options.url = "class/upload_img.php?"+json.id;

それは動作しますか？

3
Torqie

ファイルごとにURLドロップゾーン投稿を動的に変更する必要がある場合は、processingfileイベントを使用してoptions.urlを変更できます。

<form id="my-dropzone" action="/some-url" class="dropzone"></form>
<script>
Dropzone.options.myDropzone = {
  init: function() {
    this.on("processing", function(file) {
      this.options.url = "/some-other-url";
    });
  }
};
</script>
1
Saleh Mosleh

私のために働いた別の方法（イベントコールバックを受け入れる）：

$('div#dropzone').dropzone({
    options...,
    accept: function (file, done) {
        this.options.url = 'the url you want';
    }
});
0
Frank