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

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

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

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

Q&A

0回答

2047閲覧

DropzoneJS : form要素内の他fieldへの適用

innjera

総合スコア132

JavaScript

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

0グッド

0クリップ

投稿2017/01/15 08:31

ファイルのDraf and Dropを導入するべく、DropzoneJSを利用しています。
ファイルアップロードのみを機能とした場合でれば、公式サイト記載の通りform要素に直接以下の通り記載すれば、問題なく且つ想定通りに動作するのですが、form内に他のfieldを入れていている場合にうまくできず困っています。

公式の通りにコーディングすれば良いと理解しますが、どうもうまくいきません。

html

1<form action="/file-upload" class="dropzone"> 2 <div class="fallback"> 3 <input name="file" type="file" multiple /> 4 </div> 5</form>

###form内に他のfieldがあるケース

html

1<form class="edit_lesson" id="edit_lesson_3" 2enctype="multipart/form-data" action="/admin/lessons/3" 3accept-charset="UTF-8" method="post"> 4<input name="utf8" type="hidden" value="&#x2713;" /> 5<input type="hidden" name="_method" value="patch" /> 6<input type="hidden" name="authenticity_token" value="省略" /> 7 8<label for="lesson_title">講座名</label> 9<input class="form-control" type="text" placeholder="講座名を記載" value="省略" name="lesson[title]" /> 10 11<input type="file" name="lesson[flyer]" id="lesson_flyer" /> 12 13<input type="submit" name="commit" value="編集する" data-disable-with="編集する" /> 14</form>

上記form内のinput tyope ="file"の部分にDropzoneJSを適用させたいので、id="lesson_flyer"dropzoneを適用させるべくjava scriptを以下の通り記載してます。公式の通りに記載しているつもりです。

javascript

1$(function() { 2 var myDropzone; 3 Dropzone.autoDiscover = false; 4 myDropzone = new Dropzone("#lesson_flyer", { 5 url: "/admin/lessons/", 6 paramName: "lesson[flyer]", 7 parallelUploads: 1 8 }); 9});

ファイルをドロップするエリア作成の為、cssは以下の通り記載してます

css

1#lesson_flyer { 2 border-color: white; 3 color: #ccc; 4 height: 200px; 5 margin: 30px 0 20px; 6 border-style: dashed; 7 border-width: 2px; 8 line-height: 200px; 9 text-align: center; 10 cursor: pointer; 11}

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問