質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

1回答

5147閲覧

Dropzone JSの仕様について

kenkbou

総合スコア151

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2016/10/12 06:10

お世話になります。
今、DropzoneJS(http://www.dropzonejs.com/)というプラグインを試しておりまして、実装はできたのですが、
デフォルトでの使い方として、ページ内に1つ設置をして、複数画像アップロード出来る仕様かと思います。

現在、ページ内にDropzoneJSを複数インスタンス化させて使用したいと考えております。
また、そのインスタンスは1以上で追加や削除が可能なものにしたいと思っています。

その際にどう記述するのが良いかご存知の方がいらしたら教えていただきたいです。

また、Dragでのアップロード、クリックでのアップロードが可能な画像アップロードプラグインで
上記の条件を満たす便利なものをご存知でしたら教えていただけますでしょうか。
よろしくお願い致します。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/10/19 19:01

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
guest

回答1

0

「複数」も可能だと思います。

【JavaScript - DropzoneJSで複数のアップロード場所の識別(43324)|teratail】
https://teratail.com/questions/43324

JavaScript

1$("div#myId1").dropzone({ url: "/file/post?id=1" }); 2$("div#myId2").dropzone({ url: "/file/post?id=2" });

【Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js - WebDelog】
http://webdelog.info/blog/2013/03/04/dropzonejs.html

JavaScript

1// jQueryオブジェクトから呼び出す方法 2$("div#box").dropzone({ url: "post" }); 3 4// Dropzoneクラスのインスタンスを作成する方法 5var myDropzone = new Dropzone("div#box", { url: "post/"});

投稿2016/10/13 16:14

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kenkbou

2016/10/13 18:08

ご回答ありがとうございます! 質問が分かりづらくすみません。 具体的に下記のコードを追加・削除が可能にしたいと考えています。 オプションの部分を共通化出来たら便利なのですが、何か良い方法ありますでしょうか? Dropzone.options.file<ID> このキャメルの部分に変数を使うことが出来ず・・・ Dropzone.options.file<ID> = { clickable: true, addRemoveLinks: true, autoProcessQueue: true, parallelUploads: 1, acceptedFiles: 'image/*', maxFiles: 1, maxFilesize: 2, dictMaxFilesExceeded: "1ファイルまでです", init: function () { this.on("addedfile", function (file) {     // 追加 }); this.on("removedfile", function (file) { // 削除 API return false; }); } }; var myDropzone<ID> = new Dropzone("div#file01", {paramName : "img<ID>", previewsContainer: '#preview<ID>',url: "/upload.php", success: function (file, res) { // 成功! } });
kei344

2016/10/16 16:26

複数で使う場合は Dropzone.options.file<ID>という書き方はしないと思います。 myDropzone[ id ] = new Dropzone(); みたいな感じでドロップゾーンのインスタンスを配列に入れていき、optionsにアクセスしたければ myDropzone[ id ].options とかでしょう。
kenkbou

2016/10/20 03:02

すみません、リプライに気づきませんでした。 for文などで回しての、複数のインスタンス化がまだ出来ておりません。。。
kei344

2016/10/20 03:09 編集

https://teratail.com/questions/52038 同じ案件で新たな質問をされていますので、当質問はその旨を回答に書いて、それで自己解決でもして閉じられてはいかがでしょうか。 また、新たな質問のほうについてもコードが無いので何をどのように書いて思い通りにいかないのかがわかりません。
kenkbou

2016/10/21 16:27

ご連絡遅くなりすみません。 結局まだ解決出来ておりませんのでもう少し待たせていただきたいと思っております。 自分でも試行錯誤しております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問