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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

10413閲覧

IE11でCSVファイルをドラッグアンドドロップで設定したい

tomoyuki123

総合スコア273

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2018/06/20 11:47

編集2018/06/20 11:47

CSVファイルをドラッグアンドドロップで設定できるようにしたいです。
(ファイル選択ボタンを押下してファイルを選択した後の挙動と同じにしたい)

HTML

1<td id="csvFileArea"> 2 <p>ここにファイルをドロップまたは選択してください</p> 3 <input id="csvFile" name="csvFile" type="file"> 4</td>

javascript

1 2var csvFileArea = $("#csvFileArea"); 3csvFileArea.on("dragenter", function(e){ 4 e.stopPropagation(); 5 e.preventDefault(); 6}); 7csvFileArea.on("dragover", function(e){ 8 e.stopPropagation(); 9 e.preventDefault(); 10}); 11csvFileArea.on("drop", function (_e) { 12 var e = _e; 13 if (_e.originalEvent) { 14 e = _e.originalEvent; 15 } 16 e.stopPropagation(); 17 e.preventDefault(); 18 19 // ファイル情報を設定(IE11だと動かない) 20 document.querySelector('#csvFile').files = e.dataTransfer.files; 21});

このコードだとchromeとfirefoxは動いたのですが、IE11が動きません。

またdocument.querySelector('#csv-file')に「<input id="csvFile" name="csvFile" type="file">」がchromeと同様に取れており、e.dataTransfer.filesにもファイル情報が入っています。

すみませんがどなたかIE11でも同様の挙動を実現する方法を教えていただけないでしょうか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

いくつかのブラウザはファイルをプログラムから変更することが許可されてないみたいで、クロスブラウザ対応する場合は FormData を生成して AJAX で通信しなければならないようです。

投稿2018/06/20 14:41

yhg

総合スコア2161

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

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

tomoyuki123

2018/06/21 02:18

ありがとうございます。大変助かりました。
guest

0

こういうコードになりました。
もっとスマートに書きたいですね。。

HTML

1<td id="csvFileArea"> 2 <p>ここにファイルをドロップまたは選択してください</p> 3 <input id="csvFile" name="csvFile" type="file" style="display: none;"> 4 <button type="button" id="select-csv-file-button">ファイルを選択</button> 5 <label id="select-csv-file-label">選択されていません</label> 6</td> 7<button type="button" id="btn-csv-upload">保存</button>

javascript

1// (1)ドラッグアンドドロップでファイルを設定 2var droppedCsvFile = null; 3csvFileArea.on("dragenter", function(e){ 4 e.stopPropagation(); 5 e.preventDefault(); 6}); 7csvFileArea.on("dragover", function(e){ 8 e.stopPropagation(); 9 e.preventDefault(); 10}); 11csvFileArea.on("drop", function (_e) { 12 var e = _e; 13 if (_e.originalEvent) { 14 e = _e.originalEvent; 15 } 16 e.stopPropagation(); 17 e.preventDefault(); 18 19 // ファイル情報を設定 20 droppedCsvFile = e.dataTransfer.files[0]; 21 22 // ラベルにファイル名設定 23 $("#select-csv-file-label").text(droppedCsvFile.name); 24}); 25 26// (2)ファイル選択でファイルを設定 27$("#select-csv-file-button").on("click", function (_e) { 28 $("#csv-file").trigger('click'); 29}); 30$("#csv-file").on("change", function () { 31 // ファイル情報を設定 32 droppedCsvFile = $("#csv-file").prop("files")[0]; 33 34 // ラベルにファイル名設定 35 $("#select-csv-file-label").text(droppedCsvFile.name); 36}); 37 38// (3)選択したファイルをajaxでPOST 39$("#btn-csv-upload").on('click', function () { 40 var formData = new FormData(); 41 if (droppedCsvFile) { 42 formData.append($("#csv-file").attr('name'), droppedCsvFile); 43 } 44 var postData = { 45 type: "post", 46 dataType: "json", 47 data: formData, 48 processData: false, 49 contentType: false 50 }; 51 $.ajax( 52 "postするurl", postData 53 ).done(function (response) { 54 // なんか処理する 55 } 56});

投稿2018/06/21 02:20

tomoyuki123

総合スコア273

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問